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 Badge

Variants

Default

Info

Neutrals

Success

Warning

Error

Feature

Feature Secondary

Sizes

Extra small

Small

Medium

With Icons

Icon Left

Inbox

Icon Right

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.

Props

label:string

Text displayed inside the badge.

variant:string— optional

default:default

Visual style of the badge. Options: default, info, neutrals, success, warning, destructive, feature, feature-secondary.

size:string— optional

default:md

Controls spacing and font size. Options: xs, sm, md.