All components (204)

Item

Data · Item · .amset-item

What it is and when to use it

A generic row: media on the left, a title with its description in the middle and some actions on the right. It is what sits behind a list of files, customers, settings or search results, and it brings no data shape of its own: whatever you have, you put in its slots.

When to use it

For a list of named things with a detail and some action: files, people, orders, settings.
With ItemGroup for a list of them, which the screen reader announces as a list.

When not to

For label and value pairs of the same object: that is a DataList.
For rows with columns that are compared or sorted: that is a Table.
For a thread of messages: that is a Conversation.

Keyboard: with href or onPress, the title is the link or the button and its area is stretched by CSS to cover the whole row: one interactive element instead of a "clickable" row with nothing focusable inside. The actions sit above and remain separate buttons (a button inside a link is not valid HTML), so the row has one tab stop and each action its own.

Accessibility: the media is decorative and hidden from the reader: the title already says what it is. With href, current sets aria-current="page". Disabled, the title stops being a link or button. In an ItemGroup, each item is a listitem.

Fine-tuning: CSS variables --amset-item-media (side of the media), --amset-item-padding-block, --amset-item-padding-inline and --amset-item-title (size of the title).

What it looks like

OrdersTracking and returns

ShipmentsAddresses and delivery times

report-q3.pdf1.5 MB · uploaded 2 min ago

Press a whole row or the cross.

<ItemGroup label="Your account" separated>
  <Item title="Orders" description="Tracking and returns" media={<PackageIcon />} mediaKind="icon" href="/pedidos" />
  <Item title="Shipments" description="Addresses and delivery times" media={<TruckIcon />} mediaKind="icon" href="/envios" />
</ItemGroup>
<Item
  title="report-q3.pdf"
  description="1.5 MB · uploaded 2 min ago"
  media={<FileIcon />}
  mediaKind="icon"
  variant="outline"
  actions={<IconButton aria-label="Remove report-q3.pdf" size="sm" onPress={quitar}><CrossIcon /></IconButton>}
/>

Props

Import it with import { Item } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`title`required	`ReactNode`	What it is: the name of the file, the customer, the setting.
`actions`	`ReactNode`	What goes on the right: buttons, a badge, a date. They can be pressed even if the whole item is a link.
`className`	`string`	Merged with the library classes; it does not replace them.
`current`	`boolean`	The page you are on: it carries `aria-current="page"`. Only with `href`.
`description`	`ReactNode`	A line or two that explain it.
`disabled`	`boolean`	Disabled: it looks disabled and the title stops being a link or button.
`href`	`string`	With this the whole item is a real link: the title is the `<a>` and its area covers the whole row.
`media`	`ReactNode`	What goes on the left: an icon, a thumbnail, an avatar. It is decorative -the title already says what it is-, so it is hidden from the screen reader.
`mediaKind`	`ItemMediaKind`	How the media is fitted: `icon` in a tinted square, `image` cropped, `avatar` as is.
`onNavigate`	`(href: string) => void`	With `href`, calls this instead of reloading (or the router from `RouterProvider`).
`onPress`	`MouseEventHandler<HTMLButtonElement>`	With this the whole item is a button: the title is the `<button>` and its area covers the whole row.
`size`	`"sm" \| "md" \| "lg"`	—
`variant`	`"outline" \| "raised" \| "flat"`	`flat` (default) with no box, `outline` with a border, `raised` with a border and shadow.

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

CSS variables

These CSS variables are how you adapt it. Declare them on the component's selector, not on :root: the stylesheet redeclares them in the rule itself, and a declaration on the same element always wins.

Variable	Default
`--amset-item-padding-block`	`var(--amset-space-3)`
`--amset-item-padding-inline`	`var(--amset-space-4)`
`--amset-item-media`	`2.5rem`
`--amset-item-title`	`var(--amset-text-base)`

How to change it

.amset-item {
  --amset-item-padding-block: ...;
  --amset-item-padding-inline: ...;
}

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: