CynosureComponents / Feedback and display
Badge
A small status or category label in the mono "eyebrow" style. It only labels; it does nothing when clicked. For an action use Button.
When to useLink to "When to use"
- Status: Saved, Failed, Pending.
- Category or type: node kinds, column types, plan names.
soft(default): the quiet choice for lists and tables.solid: a status that must stand out.outline: a label in busy or tinted surroundings.
Use something else when:
- it can be clicked or dismissed: Button
- it navigates: Link
- it shows progress: LoadingDots
UsageLink to "Usage"
import { Badge } from "@arshad-shah/cynosure";
import { check } from "@arshad-shah/cynosure/icons";
<Badge tone="success" icon={check}>Saved</Badge>
<Badge tone="danger" variant="solid">Failed</Badge>
<Badge size="sm" variant="outline">Beta</Badge>Tone, variant and sizeLink to "Tone, variant and size"
tone is accent, neutral (default), danger, success, warning or info. variant is soft, solid or outline. size is sm, md or lg. An optional icon sits before the text. Every tone and variant keeps text at 4.5:1 or better (tested).
Tone carries meaning, but keep the text meaningful too: don't rely on colour alone to say "failed".
Status dotLink to "Status dot"
dot adds a dot before the text: true for a steady one, "live" for a pulsing one (recording, connected). Leave the text out for a dot alone, in the tone's own colour with no pill around it. It is then an image named by label, since colour alone says nothing. Where text beside it already says the state, leave label out: the dot is then decoration, hidden from assistive technology.
<Badge tone="success" dot label="Connected" />
<Badge tone="danger" dot="live" label="Recording" />PropsLink to "Props"
| Prop | What it does | Type | Default |
|---|---|---|---|
tone | Semantic colour. Default "neutral". | Tone | "neutral" |
variant | Fill style. Default "soft". | "soft" | "solid" | "outline" | "soft" |
size | Size of the badge. Default "md". | Size | "md" |
icon | Icon shown before the text. | IconData | |
color | A category colour (any CSS colour), for labels a product colours itself (HTTP methods, calendar categories). The text is mixed toward the ink so it stays readable. Overrides tone. | string | |
dot | A dot before the text: true for a steady one, "live" for a pulsing one (recording, connected). | boolean | "live" | |
className | Added to the root element, for layout. | string | |
style | Layout only. | CSSProperties | |
children | The badge's text. Leave it out, with dot, for a status dot alone. | ReactNode | |
label | Accessible name of a dot without text; a badge with text is named by its text. Accessible name of a dot without text, saying the state ("Connected"): colour alone says nothing. Leave it out only where text beside the dot already says the state: the dot is then decoration, hidden from assistive technology. | string |
Generated from the type definitions in @arshad-shah/cynosure 0.5.0.
ThemingLink to "Theming"
Tokens: --cy-badge-radius, --cy-badge-tracking and --cy-badge-soft-mix.
createTheme({ components: { badge: { radius: "999px", tracking: "0.04em" } } });className and style are for layout only.
RelatedLink to "Related"
These examples run Cynosure 0.5.0 (commit 50ce30b), the version on npm.