Item

Usage

import {
  Item,
  ItemActions,
  ItemContent,
  ItemDescription,
  ItemMedia,
  ItemTitle,
} from "@zynactra/ui/item"

<Item variant="outline">
  <ItemMedia variant="icon">
    <ShieldCheckIcon />
  </ItemMedia>
  <ItemContent>
    <ItemTitle>Two-factor authentication</ItemTitle>
    <ItemDescription>Required for everyone.</ItemDescription>
  </ItemContent>
  <ItemActions>
    <Button size="sm">Manage</Button>
  </ItemActions>
</Item>

Variants are default, outline and muted; sizes default, sm and xs. Make a whole row a link with render={<a href="..." />}. Mark the current one with aria-current="page" (or data-selected): in themes that wear the signature it gets corner ticks, and link rows get them on hover and focus. Group rows with ItemGroup and ItemSeparator.

Guidelines

• One action per row on the right. More than that, put them in a Dropdown Menu.
• A row that is a link shows a chevron and has no other buttons inside it.
• For tabular data with columns to compare, use Table.