Item
A flexible item layout for lists, feeds, and activity rows.
Features
- Composed from primitives
- Media and content slots
- Optional action areas
- Flexible list layouts
Examples
List-row layouts from the legacy doc, rebuilt with semantic tokens. Each block is its own playground; snippets include DocItemRow (doc-only helper), @ariaui/button, @ariaui/avatar, @ariaui/progress, and lucide-react icons. Replace DocItemRow with your own layout primitives in application code.
Basic item
Outline container with title, description, and a trailing button.
No preview output yet.
Recently shared
Avatar group media with a compact icon action.
No preview output yet.
Team collaboration
Stacked avatars with a text action for inviting teammates.
No preview output yet.
Item list
A list of item rows with avatar media and trailing actions.
No preview output yet.
Security alert
Icon-led status row with a primary action.
No preview output yet.
Download progress
Item row inside a card with progress feedback and a cancel action.
No preview output yet.
Keyboard
| Shortcut | Action |
|---|---|
| Tab | Move focus to the next focusable control inside or after the item. |
| Shift+Tab | Move focus to the previous focusable control. |
| Enter | Activate the focused link or button, or submit from a focused single-line input. |
| Space | Activate a focused button or toggle; text inputs keep native typing behavior. |
| Static rows | Do not receive focus by default. Use a semantic link, button, or other interactive element when the whole row should be actionable. |
Accessibility
- Use
aria-labelon action buttons when the visible label does not include the item context. - Mark decorative icons with
aria-hidden="true". - Provide descriptive
alttext for meaningful images and avatars. - Keep visible focus styles on any interactive controls inside the row.