Data Display

Item

One row of a menu or list: an icon slot, a truncating label, and hover, active, and disabled states. A styling primitive — it renders a div, so the interactivity is yours to supply.

Sourcesrc/components/ui/item.tsx

Inbox

Starred

Import

import {
  Item,
  ItemIcon,
  ItemLabel,
} from "@mikenotthepope/substrateui"

Composition

ItemIcon is shrink-0 and sizes any nested SVG to 16px; ItemLabel is truncate. Between them that is the whole reason to use the parts rather than raw spans: a long label ellipsises instead of pushing the icon out of the row.

Item
├── ItemIcon
└── ItemLabel

Item or ListGroup

Item is one row and nothing around it — no container, no dividers, no keyboard handling. Use it when you are building the surrounding control yourself: the rows of a custom menu, a filter list, a sidebar section.

ListGroup is the finished list — a bordered container with separators and real interactive rows. If you want a list, start there; come here when you want to assemble one.

Truncation

The label truncates at the row's width, which means the full text is only available on hover or via the accessibility tree. Where the tail of the label matters, give the row a title so the full string is reachable.

Quarterly revenue reconciliation — EMEA, Q3 2026

Accessibility

Item renders a div with cursor-pointer. It looks pressable and, on its own, is not: it has no tabIndex, no role, and no key handler, so a row carrying only an onClick exists for a mouse user and for nobody else.

Supply the control. Pass a button or a to render-style composition, or nest a real control inside and let the row be the decoration around it. In a listbox or menu you are building yourself, the roles and arrow-key handling are yours to add — Item supplies none of them.

active is styling. It sets data-active and no ARIA, so pair it with aria-current on a navigation row or aria-selected in a listbox — otherwise the current row is only current if you can see the tint.

disabled sets aria-disabled and removes pointer events, which stops the mouse but not the keyboard. A real control inside still needs its own disabled.

API Reference

ItemIcon and ItemLabel add no props of their own — everything, including className, goes to the underlying span. Same for anything you pass Item beyond the two below, which reaches its div.

Prop	Type	Default	Description
`active`	`boolean`	`false`	Marks the row as the current one — tinted surface and medium weight. Sets data-active for styling; adds no ARIA.
`disabled`	`boolean`	`false`	Dims the row to 50% and removes pointer events. Sets aria-disabled, but cannot disable a control it does not own.