Skip to content

Item

One row in a list: media, text and actions. A whole row can be a link, but then it can't hold buttons.

Sourcecomponents/item.tsx

Team (avatar media, actions)

  • Ada Lovelace

    Owner

  • Grace Hopper

    Editor

Links (outline), image media

Muted, dense

  • Two-factor authentication

  • Email notifications

  • All settings

Usage

Item usage
import { Avatar } from "@/components/avatar";import { Button } from "@/components/button";import { Item, ItemActions, ItemContent, ItemDescription, ItemGroup, ItemMedia, ItemTitle } from "@/components/item";
export function ItemUsage({ people }: { people: { id: string; name: string; role: string }[] }) {  return (    <ItemGroup aria-label="Team">      {people.map((person) => (        <Item key={person.id}>          <ItemMedia variant="avatar">            <Avatar alt={person.name} />          </ItemMedia>          <ItemContent>            <ItemTitle>{person.name}</ItemTitle>            <ItemDescription>{person.role}</ItemDescription>          </ItemContent>          <ItemActions>            <Button variant="outline" aria-label={`Edit ${person.name}`}>              Edit            </Button>          </ItemActions>        </Item>      ))}    </ItemGroup>  );}

When to use

Use when

Rows in a list: media, title, description, actions. ItemGroup for the list; ItemLink when the whole row is one link

Don’t use when

Tabular data with many columns (use Table); buttons inside an ItemLink