Badge
Badges are compact visual indicators used to display status, notification counts, or contextual labels. They are commonly placed on icons, avatars, or buttons.
Loading Code Block...Extra attributes (className, data-*, aria-*, etc.) are forwarded to the root element via prop spread.
Extra attributes fall through to the root via v-bind="$attrs" (remember inheritAttrs if you wrap the component).
Default
Section titled “Default”A simple medium dot badge — useful as an unread or status indicator.
Loading Code Block...Badges support sm, md, lg, xl, and 2xl.
Loading Code Block...Set type to change the visual style: dot, success, error, warning, counter, or verification.
Loading Code Block...Counter
Section titled “Counter”The counter type shows a number. Values above 99 render as 99+.
Loading Code Block...Custom colours
Section titled “Custom colours”Override colours with bgColor and textColor. They apply most clearly to dot and counter types.
React accepts either a CSS colour value ("#a855f7", "rgb(...)", etc.) or a Tailwind class string ("bg-purple-500") — both are applied.
Vue applies these as inline style only, so pass a CSS colour value ("#a855f7", "rgb(...)"). Tailwind class strings like "bg-purple-500" will not render — use a CSS colour or wrap the badge with your own utility class instead.
Loading Code Block...| Props | Default | Type | Description |
|---|---|---|---|
| type | 'dot' | 'dot' | 'success' | 'error' | 'warning' | 'counter' | 'verification' | Visual variant of the badge. |
| size | 'sm' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | Size of the badge. |
| value | - | number | Numeric value for `counter`. Values above 99 display as `99+`. |
| bgColor | - | string | Background colour for `dot` / `counter` types. Accepts a CSS colour value (e.g. `#a855f7`) in both frameworks; React additionally accepts a Tailwind class string (e.g. `bg-purple-500`). |
| textColor | - | string | Text/icon colour for `dot` / `counter` types. Accepts a CSS colour value in both frameworks; React additionally accepts a Tailwind class string (e.g. `text-white`). |