Badge

Small status indicator.

Verified

Examples

Styles

Several badge styles are available to choose from. These only change the colors, background and border of the badge.

The primary, secondary, destructive, ghost, and outline classes can be used to apply these styles.

Default
Secondary
Destructive
Outline
Ghost

Icons

Icons can be added to badges to enhance their visual appeal and usability. They can also be the only content of a badge.

Simply add an <svg> element inside the badge.

Marked
Archived

Sizing

Badges can be sized to fit the content inside them.

Simply add the fit class to the badge.

99+
Built by ahme.dev. The source code is available on Github