Badge

A badge is a component that is used to highlight an item's status for quick recognition.

Source code

Click here to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

Installation

npx ui-thing@latest add badge

Variants

Default

Default

Destructive

Destructive

Outline

Outline

Secondary

Secondary

Sizes

Three sizes are available for badges: sm, md, and lg.

Label
Label
Label