AttentionItem
A short list of what needs the reader today: a count, what it is, why, and the way there. Mark blocking items urgent. When the list is empty, pass an empty state with the next step.
- AttentionItem
- AttentionList
PreviewLink to the section Preview
Live in all three themes. Everything here is interactive.
Light theme, AttentionItem
- 3DraftsWritten but not published.
- 1Tracker sync failedUrgentThe token expired yesterday.
- 12Comments waiting for a reply on pull requests across three repositories
Nothing needs you today.
Dark theme, AttentionItem
- 3DraftsWritten but not published.
- 1Tracker sync failedUrgentThe token expired yesterday.
- 12Comments waiting for a reply on pull requests across three repositories
Nothing needs you today.
High contrast theme, AttentionItem
- 3DraftsWritten but not published.
- 1Tracker sync failedUrgentThe token expired yesterday.
- 12Comments waiting for a reply on pull requests across three repositories
Nothing needs you today.
UsageLink to the section Usage
import { AttentionItem, AttentionList } from '@skribly/ui/surfaces'<AttentionList aria-label="Needs you">
<AttentionItem count={3} label="Drafts" note="Waiting for review" href="/drafts" actionLabel="Review" />
<AttentionItem count={1} label="Failed sync" urgent urgentLabel="Urgent" href="/sync" />
</AttentionList>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
- Each row is one link named by its count and label and described by the note, so a links list still makes sense.
- The whole row is the target and shows the focus ring.
- Urgent rows add a warning glyph and the urgentLabel word, never red alone.
- The action hint is hidden from screen readers.
This demo runs through axe in all three themes on every test run. See what the tests check.