Item | Glaze design system

Sizes

When to use it

Use: A short list of similar things, each a row: agents, keys, reviewers, saved prompts.
Use: Each row opens its own page or panel: ItemLink.
Use: Each row carries a quiet action or two: copy, more, remove.
Not for: Label and value pairs about one thing. Use Data list.
Not for: One topic with a header and a footer. Use Card.
Not for: A file the person attached. Use Attachment.

7 rules

Must: Put Items in an ItemGroup with an aria-label; use variant="plain" inside a Card's CardContent flush. Because the group is the panel and the list role, and a second panel inside a card's panel is a box in a box.
Never: Wrap a row in an <a> or render it as a link when it holds actions; put ItemLink in ItemTitle. Because a button inside a link is invalid HTML and takes the press of both, while ItemLink covers the row under its actions.
Must: Make ItemActions ghost icon-sm Buttons with an aria-label naming the row, or one size="sm" Button. Because a filled Button on every row stacks a column of pills, and "Copy" alone does not say which key it copies.
Never: Mark the chosen row with a colour, a bold title or a bar on one edge; set selected. Because colour means status, and a bar on one edge is the side rail Glaze rules out; selected gives the pressed wash and aria-current.
Must: Put an ID after the name in ItemTitle in type-code-sm, never the name itself in mono. Because mono is for code and IDs; a name in mono reads a size bigger and as something to copy.
Should: Put what the person can live without in ItemMeta; it is the first part to go under 28rem. Because a row keeps its title and actions at 390 by giving up its meta.
Should: Keep a list of Items to about a dozen rows; a longer one belongs in a table with search. Because a panel never scrolls inside, so a long list pushes everything below it.

5 states, highest first

4 checks

: ItemGroup is role="list" and each Item a listitem; name the group with aria-label.
: ItemLink is one tab stop per row, with a 1.5px ink ring drawn inside the row, its corners on the panel's, never clipped.
: Actions follow the link in tab order and name their row.
: Description and meta are text-2, 5.5:1 on paper.

2 keys

6 edge cases

Long title: Truncates last, after the meta has gone; an ID after it truncates first.
Row under 28rem: The meta hides; the status and actions stay.
Description of three lines: Clamps at two; the media moves to the top.
One row: The rule drops and the panel's edge closes the list.
Zoom 200%: Rows grow from 36px with the text.
Dark theme: The wash and the rule flip with the ink.

6 props

15 tokens