Badges
Usage and anatomy
Badge uses explicit parts so status indicators remain easy to compose. Use <Badge.Root /> as the container, <Badge.Label /> for its text, and optionally add <Badge.Dot /> or <Badge.Icon /> for supporting visuals.
import * as Badge from "@acme/ui/badge"<Badge.Root variant="success"><Badge.Dot /><Badge.Label>Available</Badge.Label></Badge.Root>
- Use semantic variants to communicate status, rather than using color for decoration alone.
- Use the dot for compact status indicators and icons when the visual adds meaning beyond the label.
- Badge is a non-interactive indicator. Use Button for actions or links.
Badge Variants
License required
In order to get the source code for this component, you need to buy a license.
Badge Sizes
License required
In order to get the source code for this component, you need to buy a license.
Badge with Dot
License required
In order to get the source code for this component, you need to buy a license.
Badge with Icons
License required
In order to get the source code for this component, you need to buy a license.
API reference
Badge.Root
| Prop | Type | Default |
|---|---|---|
| variant | transparent | error | primary | success | warning | primary |
| size | sm | md | md |
Badge.Root also accepts native div props. Badge.Icon accepts position="start" or position="end"; its size is inherited from Badge.Root. Badge.Dot inherits the root size as well.