Components
Badge
A Badge is a small label that can be used to display a status or a value
Basic Usage
A Badge is a small label that can be used to display a status or a value
BlueSkyMintGreenTealCyanIndigoPurplePinkRedOrangeYellowBronzeGray
import { Badge } from "@epilot/volt-ui"
<Badge color="blue" style="solid">Blue</Badge>API Reference
Badge
A small label component that can be used to display a status or a value. Supports multiple colors, styles, and shapes.
| Prop | Type | Default | Description |
|---|---|---|---|
color | "blue" | "sky" | "mint" | "green" | "teal" | "cyan" | "indigo" | "purple" | "pink" | "red" | "orange" | "yellow" | "bronze" | "gray" | "blue" | The color variant of the badge. |
style | "soft" | "solid" | "surface" | "soft" | The style variant of the badge. |
shape | "default" | "rounded" | "default" | The shape variant of the badge. "default" uses rounded corners, "rounded" uses a pill shape. |
asChild | boolean | false | When true, the badge will render as its child element instead of a span. |
className | string | - | Additional CSS classes to apply to the badge. |
Note: The Badge component also accepts all standard HTML span element props (e.g., id, aria-label, etc.).