TrayRow

Stable

A compact list row with an icon, a title, a detail line and a hint that shows on hover.

Also known as list item, sidebar item, nav item

Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.

<ul className="w-full max-w-sm space-y-0.5">
  <TrayRow icon={<FileIcon width={14} height={14} />} title="Meeting notes" detail="Edited today" trailing="Open" />
  <TrayRow icon={<FileIcon width={14} height={14} />} title="Roadmap draft" detail="Edited yesterday" trailing="Open" />
</ul>

Icons are optional. The hint at the end shows on hover or when the row is reached by keyboard.

Usage Code Design Accessibility

When to use it

A compact row that can be pressed, for tight lists. The amber dot is the one mark that says this row is waiting on a person.

Made of: Icon or amber dot · Title · Detail · Hint at the end

Use it for

Items in a task tray or a list of recent things.
A row that opens something when pressed.
Showing which item is waiting on the person: turn on attention.

Not for

A to-do item that shows status and is not pressed: use ChecklistRow.
A tag that shows what the chat is about: use ContextChip.

Do and avoid

Do. Only the row that needs you gets the amber dot.

Avoid. Every row marked, so people cannot tell which one needs them.

Do

Put rows inside a list.
Mark only rows that truly wait on a person.
Write a detail that says the status or the next step.
Keep titles short so the detail has room.

Avoid

Do not mark most rows. The amber dot loses meaning when it is common.
Do not hide essential actions in the hint. It only shows on hover or keyboard focus.
Do not use it outside a list.

On a phone

Under 640px wide the row has rounded corners, the title sits above the detail, and the detail wraps instead of being cut off.
From 640px wide the title and detail share one line and the detail is truncated.
Rows keep their size and have a tap area at least 44px tall on touch screens, and the trailing text is always visible there instead of only on hover.

Properties

Prop	Type	Default	Description
titlerequired	string	none	Primary label, medium weight.
detail	string	none	Secondary text that truncates when space runs out.
attention	boolean	none	Shows the amber dot instead of the icon and sets the detail text to the foreground colour.
icon	ReactNode	none	Leading icon. Ignored when attention is true.
trailing	ReactNode	none	Small text or node at the right edge. Hidden until the row is hovered or focused.
onClick	() => void	none	Click handler for the row button.

"Show code under the preview gives the code for the example on the stage."

In Figma

In Figma, one TrayRow switches all of this from its properties panel, across 8 variants. Each property sets the React prop beside it, so design and code use the same names.

TrayRow in Figma: each property and the React prop it sets
Figma property	React	Values
Attention	`attention`	On or off
State	Hover, Pressed and Focus come from the browser.	Default, Hover, Pressed, Focus
Title	`title`	Any text
Detail	`detail`	Any text
Trailing	`trailing`	Any text

States

States this part has beyond its default look. Build each one your screen can reach. States set by a property are in the Code tab.

hover: The row gets a soft background and shows its trailing text, such as Open.
focus: A visible focus ring appears and the trailing text shows when you reach the row with the keyboard.
attention: Pass attention to swap the icon for a small attention dot.
truncated: On wider screens a long detail is cut off with an ellipsis.

Tokens

Change one of these and every part that uses it follows.

--surface-hover
--fg
--fg-subtle
--attention
--radius-control
--radius-card

Plain rows