jio-badge

Props

Prop name	Description	Type	Values	Default
variant	The button variant you want to use @values primary, secondary	buttonVariant	-	"primary"

Slots

Name	Description	Bindings
default

---

View on Gitlab

General

This component is based on the Bootstrap badge/pill.

View design in Figma

Code examples

A normal badge.

<template> <div class="jio-core"> <jio-badge v-if="showBadge" :variant="'primary'" @click="showBadge = false" >Button</jio-badge > <br /> <br /> <jio-badge v-if="showSecondaryBadge" :variant="'secondary'" @click="showSecondaryBadge = false" >Button</jio-badge > </div> </template> <script setup lang="ts"> import { ref } from "vue"; let showBadge = ref(true); let showSecondaryBadge = ref(true); </script>