PriorityBadge
The priority of an issue as an arrow glyph and a word. Pick compact on cards, where only the glyph shows.
- PriorityBadge
PreviewLink to the section Preview
Live in all three themes. Everything here is interactive.
Light theme, PriorityBadge
UrgentHighMediumLowLowest
Priority UrgentPriority HighPriority MediumPriority LowPriority Lowest
Dark theme, PriorityBadge
UrgentHighMediumLowLowest
Priority UrgentPriority HighPriority MediumPriority LowPriority Lowest
High contrast theme, PriorityBadge
UrgentHighMediumLowLowest
Priority UrgentPriority HighPriority MediumPriority LowPriority Lowest
UsageLink to the section Usage
import { PriorityBadge } from '@skribly/ui/tracker'<PriorityBadge level="high" label={t('priority.high')} fieldLabel={t('fields.priority')} compact />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
- Arrows climb with the level, so the order reads without colour.
- The word is always in the page: compact hides it from sight only, and fieldLabel is read before it, so a card says "Priority High".
- The glyph is hidden from screen readers.
This demo runs through axe in all three themes on every test run. See what the tests check.