Variants

Use the variant prop to change the badge style. Use brand for primary emphasis, outline for secondary information, and muted for subtle labels.

BrandOutlineMuted

Sizes

Use the size prop to control badge dimensions. Available sizes are xxs, xs, sm, md, and lg.

xxsxssmmdlg

Rounded

Use the rounded prop to create pill-shaped badges, useful for counts or tags.

12NewDraft

With Icons

Use prefix or suffix props to add icons before or after the badge text.

VerifiedFeatured

Icon Only

Use the iconOnly prop to create compact badges containing only an icon.