IssueStatusBadge
A status under the project’s own name, tinted by its category: not started, in progress, done or cancelled. Pick it for the status of an issue in lists, cards and headers.
- IssueStatusBadge
PreviewLink to the section Preview
Live in all three themes. Everything here is interactive.
Light theme, IssueStatusBadge
To doIn progressIn reviewDoneWon’t doSmallWaiting for the security review of the release
Dark theme, IssueStatusBadge
To doIn progressIn reviewDoneWon’t doSmallWaiting for the security review of the release
High contrast theme, IssueStatusBadge
To doIn progressIn reviewDoneWon’t doSmallWaiting for the security review of the release
UsageLink to the section Usage
import { IssueStatusBadge } from '@skribly/ui/tracker'<IssueStatusBadge category="in_progress">{status.name}</IssueStatusBadge>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
- The name is plain text, so it is read as written.
- Each category has its own glyph shape (an empty ring, a dashed ring, a ticked ring, a struck ring), hidden from screen readers.
- Text and tint pairs come from the tokens in every theme, and a transparent border keeps the outline in forced colours.
- Long names truncate with the full name in the title.
This demo runs through axe in all three themes on every test run. See what the tests check.