Badge
A short, non-interactive label, such as one item of a tech stack or a status.
On this page
DraftPublishedIn review
BadgeExample.tsx
import { Badge } from "@/components/Badge";
import { Stack } from "@/components/Stack";
export function BadgeExample() {
return (
<Stack direction="horizontal" gap="xs">
<Badge>Draft</Badge>
<Badge variant="success">Published</Badge>
<Badge variant="warning">In review</Badge>
</Stack>
);
}Examples
Variants
NeutralAccentAccent 2LiveBetaDeprecated
Sizes
SmallMedium
With an icon
LiveOpen source
A tech stack, as a list
- React
- TypeScript
- AWS
In running text, with inline markup
This site is Live and Built with Vite.
Wraps instead of overflowing
Infrastructure as code
Internationalization
Customized with component tokens
Custom
CSS
.customBadge {
--component-badge-neutral-border: var(--color-border-strong);
--component-badge-padding-inline-md: var(--space-inline-md);
}Props
Any native prop not listed here goes to the root element unchanged.
A status badge's wording must state the status on its own. Inside a list, use as="li". Icon names come from Icon's registry. Its type matches Typography's label look: the same family and tracking tokens.
| Prop | Type | Default | Description |
|---|---|---|---|
as | "span" | "li" | "span" | The root element. |
variant | "neutral" | "accent" | "accent-2" | "success" | "warning" | "error" | "neutral" | neutral, accent and accent-2 are emphasis only; success, warning and error carry meaning. |
size | "sm" | "md" | "md" | Text size and padding. |
icon | IconName | — | Decorative icon before the text. |
Component tokens
| Token | Copy | Description | Aliases | Light | Dark | Preview |
|---|---|---|---|---|---|---|
--component-badge-font-family | Badge font (mono). | type.family.label | 'Fira Code Variable', 'Fira Code Fallback', ui-monospace, SFMono-Regular, Menlo, Consolas, monospacefrom type.font-stack.mono | 'Fira Code Variable', 'Fira Code Fallback', ui-monospace, SFMono-Regular, Menlo, Consolas, monospacefrom type.font-stack.mono | ||
--component-badge-font-size-sm | Small badge text. | type.size.label | 0.75remfrom type.font-size.xs | 0.75remfrom type.font-size.xs | ||
--component-badge-font-size-md | Standard badge text. | type.size.small | 0.875remfrom type.font-size.sm | 0.875remfrom type.font-size.sm | ||
--component-badge-tracking | Letter spacing of the uppercase label. | type.tracking.label | 0.16emfrom type.letter-spacing.16 | 0.16emfrom type.letter-spacing.16 | ||
--component-badge-font-weight | Badge text weight, the same inside headings and bold text. | type.weight.body | 400from type.font-weight.400 | 400from type.font-weight.400 | ||
--component-badge-line-height | Badge line height. | type.leading.body | 1.6from type.line-height.normal | 1.6from type.line-height.normal | ||
--component-badge-radius | Badge corners: a pill, unlike the buttons. | radius.pill | 9999pxfrom radius.full | 9999pxfrom radius.full | ||
--component-badge-padding-inline-sm | Inline padding of small badges. | space.inline.sm | 0.5remfrom space.2 | 0.5remfrom space.2 | ||
--component-badge-padding-inline-md | Inline padding of standard badges. | space.inline.sm | 0.5remfrom space.2 | 0.5remfrom space.2 | ||
--component-badge-gap | Space between a badge's icon and its text. | space.inline.xs | 0.25remfrom space.1 | 0.25remfrom space.1 | ||
--component-badge-border-width | Badge outline width. | effect.border.width | 2pxfrom effect.line.2 | 2pxfrom effect.line.2 | ||
--component-badge-neutral-background | Neutral badge fill. | color.surface.sunken | #f2ede2from color.sand.100 | #060a13from color.slate.1000 | ||
--component-badge-neutral-text | Neutral badge text. | color.text.muted | #455464from color.gray.700 | #e6ecf3from color.slate.100 | ||
--component-badge-neutral-border | Neutral badge outline (decorative). | color.border.subtle | #e5dccbfrom color.sand.200 | #272f3ffrom color.slate.800 | ||
--component-badge-accent-background | Accent badge fill. | color.accent.background | #e0f6fefrom color.cyan.50 | #00242efrom color.cyan.950 | ||
--component-badge-accent-text | Accent badge text. | color.accent.text | #005f7bfrom color.cyan.700 | #54d8f4from color.cyan.300 | ||
--component-badge-accent-border | Accent badge outline (decorative). | color.accent.border | #1c87a5from color.cyan.500 | #54d8f4from color.cyan.300 | ||
--component-badge-accent-2-background | Second accent (violet) badge fill. | color.accent-2.background | #f4f0fdfrom color.violet.50 | #2a1f52from color.violet.900 | ||
--component-badge-accent-2-text | Second accent (violet) badge text. | color.accent-2.text | #5b3fa6from color.violet.600 | #c9b8f5from color.violet.300 | ||
--component-badge-accent-2-border | Second accent (violet) badge outline (decorative). | color.accent-2.border | #5b3fa6from color.violet.600 | #c9b8f5from color.violet.300 | ||
--component-badge-success-background | Success badge fill. Never the only cue: the wording must state the status (WCAG 1.4.1). | color.success.background | #e8f5eefrom color.green.50 | #11352afrom color.green.900 | ||
--component-badge-success-text | Success badge text. Never the only cue: the wording must state the status (WCAG 1.4.1). | color.success.text | #1e6b45from color.green.700 | #8fd6a8from color.green.300 | ||
--component-badge-success-border | Success badge outline (decorative). | color.success.border | #2a8556from color.green.600 | #5fbf86from color.green.400 | ||
--component-badge-warning-background | Warning badge fill. Never the only cue: the wording must state the status (WCAG 1.4.1). | color.warning.background | #fdf0e6from color.orange.50 | #45230dfrom color.orange.900 | ||
--component-badge-warning-text | Warning badge text. Never the only cue: the wording must state the status (WCAG 1.4.1). | color.warning.text | #94440afrom color.orange.700 | #f7ad7cfrom color.orange.300 | ||
--component-badge-warning-border | Warning badge outline (decorative). | color.warning.border | #b25a12from color.orange.600 | #ec8c4efrom color.orange.400 | ||
--component-badge-error-background | Error badge fill. Never the only cue: the wording must state the status (WCAG 1.4.1). | color.error.background | #fceceafrom color.red.50 | #4a1a1cfrom color.red.900 | ||
--component-badge-error-text | Error badge text. Never the only cue: the wording must state the status (WCAG 1.4.1). | color.error.text | #b3261efrom color.red.700 | #f4a097from color.red.300 | ||
--component-badge-error-border | Error badge outline (decorative). | color.error.border | #c8372cfrom color.red.600 | #e8776cfrom color.red.400 |
Accessibility
- Plain text in a span or li: not focusable, no pointer cursor, no hover state.
- neutral, accent and accent-2 are emphasis only: the choice between them must not carry information, so color alone is fine. success, warning and error carry meaning, so the wording must state the status on its own (WCAG 1.4.1); the color and any icon are extras.
- The icon is decorative and hidden from screen readers.
- The uppercase is CSS only, so write the source text in normal case: copy and paste, reader modes and some browsers keep it. Other browsers pass the capitals on to screen readers, so avoid short words that read as acronyms.
- Badges wrap rather than overflow at narrow widths and high zoom (WCAG 1.4.10).