List Item

ListItem is the standard row composition for product lists such as event types, workflows, webhooks, and feature flags. It provides consistent spacing, stacked-row borders, hover states, actions, and optional sortable behavior.

Copyimport {
  ListItem,
  ListItemActions,
  ListItemBadges,
  ListItemContent,
  ListItemDescription,
  ListItemHeader,
  ListItemSpanningTrigger,
  ListItemTitle,
} from "@coss/ui/shared/list-item";

Anatomy

A row is composed from the following parts:

• ListItem wraps one row and applies its padding and stacked-row borders.
• ListItemContent is the flexible content column.
• ListItemHeader groups the title and optional description.
• ListItemTitle is the row heading. Use ListItemSpanningTrigger inside it when the row opens a destination.
• ListItemDescription adds supporting copy.
• ListItemBadges holds optional status or metadata badges below the header. It omits its layout wrapper when conditional children produce no badges.
• ListItemActions keeps controls above a spanning trigger so switches, menus, and buttons remain independently interactive.
• ListItemDragHandle is used with sortable rows to reveal a dedicated reorder handle.

Containers

Use ListItem for rows inside a Card. Stacked rows must always be wrapped by CardPanel with className="p-0" so the card owns the outer chrome while rows own their padding and separators.

CardFrame provides a titled section around a Card; it does not replace the inner card. Organization roles use this composition: CardFrame → Card → CardPanel className="p-0" → ListItem.

Copy<Card>
  <CardPanel className="p-0">
    <ListItem>{/* row content */}</ListItem>
    <ListItem>{/* next row */}</ListItem>
  </CardPanel>
</Card>

Non-clickable

Use a plain title when the row itself has no destination. Feature flags are a real example: the row describes a flag while the controls on the right toggle it or assign users.

Clickable with a spanning trigger

When activating the row navigates or opens an editor, wrap the title in ListItemSpanningTrigger. It can render as a Link or a button, covers the row surface, and preserves independently interactive ListItemActions.

The webhook list uses a link trigger with an enable switch and options menu. Event types and workflows use the same trigger pattern with sortable rows; Out of office and Discover use a button when the destination opens in place.

Copy<ListItemTitle className="inline-flex">
  <ListItemSpanningTrigger render={<Link href={editHref} />}>
    {title}
  </ListItemSpanningTrigger>
</ListItemTitle>

Do not put actions inside the trigger. Keep them in ListItemActions so keyboard and pointer interactions reach the intended control.

Sortable

For reorderable lists, use SortableListItem (or ListItem with sortable) inside SortableList. Pass the sortable props to the row and ListItemDragHandle, then pass sortableListeners to the spanning trigger when dragging by the title is supported. See Sortable for the full setup.

Product call sites

Example URLs

Not exhaustive — a few places you can open locally (e.g. http://localhost:3000) to see this in product.

Source

packages/coss-ui/src/shared/list-item.tsx