Badge
Every example on this page is live, drawn by the library's Storybook, where you can also change its props and see the result.
An inline label in solid or outline style.
Import
import { Badge } from "~lib/data-display/badge";
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
children | ReactNode | No | N/A | Badge content |
variant | "solid" | "outline" | No | "solid" | Visual style |
size | "xs" | "sm" | "md" | "lg" | No | "md" | Badge size |
shape | "pill" | "circle" | No | "pill" | Badge shape |
icon | IconName | No | N/A | An icon before the text, as tall as the text |
A badge keeps its own width: in a flex row it never shrinks or wraps its text, so beside a paragraph that truncates, the paragraph is what gives way.
Examples
Solid
Outline
Small
Extra Small
size="xs" is exactly as tall as a line of xs text, so a badge in an xs row, such as a status
on a line-status board, keeps the row the same height as the rows without one.
With an Icon
icon draws any Icon name before the text, as tall as the
text and in its color, on either variant and at every size. A change pill carries its trend glyph
this way rather than nesting an Icon of its own. An icon with no text in a shape="circle"
badge draws a round mark, such as a tick.
<Badge variant="outline" icon={trendIconName(change)}>
+2.4%
</Badge>
In a Flex Row
Beside a paragraph that truncates, the badge keeps its width and its one line, and the paragraph ends in "…".
Circle
shape="circle" keeps the badge round at every size, so one or two digits sit in a circle rather than a pill.
Day Numbers
Mark today's date with a solid circle and the other days with an outline, the way a calendar does.