Badge

A badge component for displaying status, labels, or counts.

Basic Usage

Default Badge

Badge

Colors

Badge Colors

Gray Blue Green Yellow Red Purple Teal Orange

Styles

Badge Styles

Solid and outline styles.

Solid Outline

Sizes

Badge Sizes

Small Medium Large

Use Cases

Status Badges

Active Pending Error Inactive

API Reference

PropTypeDefault
color"gray" | "blue" | "green" | "yellow" | "red" | "purple" | "teal" | "orange""gray"
badgeStyle"solid" | "outline""solid"
size"sm" | "md" | "lg""md"