Badge
Badges display small, color-coded pieces of metadata to capture a user’s attention. They are useful for highlighting important information, such as notifications, statuses, or counts.
Example
UI recommendations
Consider using text to provide descriptive text for elements without the colored emphasis of a badge.
Content
Badges can include a label, an icon, or both as children.
Variants
Badges can have different colors to indicate their purpose.
Use badges with label colors to color-code categories, ideally for 8 or fewer categories.
API reference
A badge is used for showing a small amount of color-categorized metadata.
Returns: Element The rendered badge element.
| Parameters | Type | Default | Description |
|---|---|---|---|
| *children | Any | The content to display in the badge. | |
| variant | Literal['neutral', 'info', 'positive', 'negative', 'indigo', 'yellow', 'magenta', 'fuchsia', 'purple', 'seafoam'] | None | None | The background color of the badge. |
| key | str | None | None | A unique identifier used by React to render elements in a list. |