System

Badges / Status and label chips, with icons.

Variants

Six tonal chips: default, secondary, outline, destructive, ghost, and link. Each pairs a dark fill with the variant's anchor hue, lifted to stay legible; hover brightens the label.

variant
DefaultSecondaryOutlineDestructiveGhostLink

With Icon

Use the iconprop to add an icon before the label. Icons inherit the variant's text color.

icon
DefaultSecondaryOutlineDestructiveGhostLink

As Links (asChild)

Interactive badges get hover states automatically. Use asChild for links or buttons.