Badge
A short label for a state or a count, such as Draft or Failed. Pick it for static facts inside rows and headers; use StatusDot when the state is live.
- Badge
PreviewLink to the section Preview
Live in all three themes. Everything here is interactive.
Light theme, Badge
DraftNewDoneWaitingFailedInfoSmallSuggested by the assistant from the last three weeks of activity
Dark theme, Badge
DraftNewDoneWaitingFailedInfoSmallSuggested by the assistant from the last three weeks of activity
High contrast theme, Badge
DraftNewDoneWaitingFailedInfoSmallSuggested by the assistant from the last three weeks of activity
UsageLink to the section Usage
import { Badge } from '@skribly/ui/feedback'<Badge tone="ok" icon={<Check />}>Done</Badge>Every label is a prop, so the app passes its own words in its own language. See no built-in text.
AccessibilityLink to the section Accessibility
- Plain text, so screen readers read the word.
- Icons are hidden.
- Every tone pairs its colour with text, and the text and tint pairs meet 4.5:1 in all three themes.
- Long text truncates on screen and stays whole for screen readers; pass title when the full text matters.
- A transparent border keeps the outline in forced colours.
This demo runs through axe in all three themes on every test run. See what the tests check.