LabelList
The labels of an issue as a named, wrapping list. Pick max where space is short; the rest fold behind a +N button.
- LabelList
PreviewLink to the section Preview
Live in all three themes. Everything here is interactive.
Light theme, LabelList
- frontend
- accessibility
- frontend
- backend
- accessibility
No labels
Dark theme, LabelList
- frontend
- accessibility
- frontend
- backend
- accessibility
No labels
High contrast theme, LabelList
- frontend
- accessibility
- frontend
- backend
- accessibility
No labels
UsageLink to the section Usage
import { LabelList } from '@skribly/ui/tracker'<LabelList labels={issue.labels} label={t('fields.labels')} max={3}
moreLabel={(n) => t('labels.more', { count: n })} lessLabel={t('labels.fewer')} />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
- A list named by label, so screen readers say how many labels there are.
- The +N button is named by moreLabel, says aria-expanded and controls the list; it keeps focus when the list opens and becomes the button that folds it back.
This demo runs through axe in all three themes on every test run. See what the tests check.