Badge
Displays a non-interactive badge with optional icons, sizes, and variants. This component is used to highlight key metadata—such as status, categories, or counts—providing a quick visual cue without cluttering the interface.
Install
Run the following command to install the badge component:
npx acc-nuxt add BadgeVariants
Default
Default
Info
Info
Neutrals
Neutrals
Success
Success
Warning
Warning
Error
Error
Feature
Feature
Feature Secondary
Feature Secondary
Sizes
Extra small
Small
Medium
With Icons
Icon Left
Inbox
Icon Right
Next
Icon Tooltip
Next
Props
label:string
Text displayed inside the badge.
variant:'default' | 'info' | 'neutrals' | 'success' | 'warning' | 'destructive' | 'feature' | 'feature-secondary'— optional
default:default
Visual style of the badge.
size:'xs' | 'sm' | 'md'— optional
default:md
Controls the badge spacing and font size.
Slots
The badge component provides the following slots for icons.
#iconLeft
Slot for an icon rendered before the label.
#iconRight
Slot for an icon rendered after the label.
CSS Variables
--lev-badge-gap
default:4px
Gap between the label and optional icons.
--lev-badge-border-radius
default:4px
Border radius of the badge.
--lev-badge-font-weight
default:400
Font weight used by the badge label.
Wrapper Configuration
allowedVariants:readonly string[]
default:['default', 'info', 'neutrals', 'success', 'warning', 'destructive', 'feature', 'feature-secondary']
Variants supported by the copied wrapper. Edit this array in the wrapper when changing the supported variant API.
allowedSizes:readonly string[]
default:['xs', 'sm', 'md']
Sizes supported by the copied wrapper. Edit this array in the wrapper when changing the supported size API.