Item
Shows one thing on a row with its name, status, time and actions.
Examples
Styles
defaultdefault
framed
Sizes
defaultdefault
sm
dense
States
rest
hover
focus-visible
selected
Usage
When to use it
- Use
- A list of things of one or more kinds, each opened by clicking its row: eval runs, agents, prompt releases.
- Use
- A row needs a status, a time and one or two actions beside the name.
- Use
- The same list appears in a sidebar and on a page and must work in both.
- Not for
- The rows need sorting or aligned columns of numbers. Use Table.
Rules
9 rules
- Must
- Put an ItemLink in the title and keep ItemActions as buttons when the row opens something and has actions. Because a row rendered as a link with a Button inside nests a button in a link, which a screen reader flattens.
- Must
- Set kind on the Item, not only on the kind label. Because selection takes its hue from data-kind on the row, so without it the open run shows the default wash.
- Must
- Pass selected and aria-current="true" on its ItemLink for the open row. Because a wash class sets no data-selected or aria-current, so forced colors lose the outline and a screen reader hears no current row.
- Should
- Render a list of Items as a ul with each Item in an li.
- Should
- Use the thing's name in the title, not its kind.
- Should
- Show at most 2 icon buttons and move the rest into a DropdownMenu.
- Should
- Keep a description to what tells this row apart, up to 2 lines.
- Should
- Leave the ID out of the title in a rail under 240px; the row drops it under 416px.
- Never
- Wrap every row in its own card or frame; put rows in an ItemGroup, which draws the one frame. Because a frame per row stacks two frame lines between neighbours and hides the selected row's rules.
Accessibility
5 checks
- Tab focuses the row link, then each action; focus draws a 2px ring around the whole row.
- ItemLink is the link with the name and aria-current when open; the whole row is its hit area.
- The status word stays at every width, so it is always read.
- Selected draws a 2px outline in forced colors.
- Hover applies on hover-capable devices only.
Edge cases
10 edge cases
- Long name
- Truncates with an ellipsis; the ID keeps 7ch; a description clamps at 2 lines.
- Narrowing row
- Drops the time under 608px, the ID under 416px, then truncates the name.
- Right to left
- Parts mirror.
- Failed row
- Show ItemStatus fail; put the reason in the description.
- Long list
- Scrolls inside its box; rows measure with container queries, so length costs no layout.
- No children
- An empty row at its minimum height; use Empty state for zero items.
- Loading
- Show Skeleton rows at the same minimum height.
- Action pressed ten times
- Fires the button only, never the row link.
- Zoom 200%
- The row grows (min-h, not h).
- Inside a menu
- Use size="dense".
API
8 props
Item variant'default' | 'framed' | 'muted' | 'outline'default'default'Item in a CardcontextItem size'default' | 'sm' | 'dense'default'default'Item kindKindItem selectedbooleanItem renderReactElementItemMedia variant'default' | 'icon' | 'image'default'default'ItemStatus statusStatusValue
Tokens
23 tokens
--surface-hover- oklch(var(--ink-c) / 0.05)
--surface-pressed- oklch(var(--ink-c) / 0.08)
--dur-fast- 120ms
--ease-step- cubic-bezier(0.2, 0, 0, 1)
--accent-wash- var(--surface-selected)
--accent-mark- var(--ink)
--line-frame- oklch(var(--ink-c) / var(--line-frame-alpha))
--line-row- oklch(var(--ink-c) / 0.08)
--radius-soft- 6px
--radius-frame- 10px
--row- 40px
--row-sm- 32px
--row-lg- 56px
--control-sm- 28px
--space-4- 16px
--space-3- 12px
--space-2- 8px
--type-label- 400 14px/16px var(--font-sans)
--type-body-sm- 380 13px/18px var(--font-sans)
--text-2- oklch(var(--ink-c) / 0.80)
--text-3- oklch(var(--ink-c) / 0.66)
--line-focus- 2px
--border-focus- var(--ink)