Badge
Badge is an element for the use of drawing attention to additional interface information with eye-catching appeal, typically displaying unread messages count.
Basic Buttons
vue
<template>
<div>
<Badge label="primary" badgeClass="bg-primary-500 text-white" />
</div>
</template>
<script setup>
import Badge from '@/components/Badge';
</script>
TIP
You can use badgeClass props for button type. Available types: badgeClass="btn-primary-500", badgeClass="btn-secondary-500", badgeClass="bg-danger-500", badgeClass="bg-success-500", badgeClass="bg-info-500", badgeClass="bg-warning-500"
Pill Badges
Just add an extra class pill to make a pill badge.
Soft Badges
Just add an extra class bg-opacity-[0.12] to make a soft badge.
Badges With Icon
Just add props icon="heroicons-outline:star" to add an icon to the badge.
Badges In Buttons
vue
<template>
<div>
<Button btnClass="btn-dark">
Notifications
<Badge label="2" badgeClass="bg-white text-slate-900 " />
</Button>
</div>
</template>
<script setup>
import Badge from '@/components/Badge';
import Button from '@/components/Button';
</script>