Components

Item / Item Set

List-row primitive (Item) grouped into a bordered card (ItemSet), with an optional section heading above it. Vertical and horizontal layouts.

View in Figma
LH
Maintenance request #4287
Lobby HVAC — In progress
Assignee
AG
Ashley Green
Priority
Medium
Medium
Status
In progress
In progress
Updated
2 hours ago
<ItemSet
  heading="Maintenance request #4287"
  description="Lobby HVAC — In progress"
  headingAvatar={{ initials: "LH" }}
>
  <Item
    label="Assignee"
    text="Ashley Green"
    leadingAvatar={{ initials: "AG" }}
  />
  <Item
    label="Priority"
    text="Medium"
    trailing={
      <Badge type="outline">Medium</Badge>
    }
  />
  <Item
    label="Status"
    text="In progress"
    trailing={
      <Badge type="solid">In progress</Badge>
    }
  />
  <Item
    label="Updated"
    text="2 hours ago"
    leadingIcon={faClock}
  />
</ItemSet>
Building
Main building
Room
Conference Room A
Reported
Jan 15, 2026
Description
HVAC unit running loudly since morning.
Reported by Ashley Green
<ItemSet>
  <Item
    orientation="horizontal"
    label="Building"
    text="Main building"
    leadingIcon={faBars}
  />
  <Item
    orientation="horizontal"
    label="Room"
    text="Conference Room A"
  />
  <Item
    orientation="horizontal"
    label="Reported"
    text="Jan 15, 2026"
    leadingIcon={faCalendar}
  />
  <Item
    orientation="horizontal"
    label="Description"
    text="HVAC unit running loudly since morning."
    supportingText="Reported by Ashley Green"
  />
</ItemSet>
<ItemSet>
  <Item
    text="Lobby HVAC unit"
    supportingText="Assigned to Ashley Green"
    leadingIcon={faGear}
    trailing={<Badge type="soft">Open</Badge>}
    onClick={() => undefined}
  />
  <Item
    text="Warehouse door sensor"
    supportingText="Assigned to Ollie Brooks"
    leadingIcon={faCircleExclamation}
    trailing={
      <Badge type="solid">In progress</Badge>
    }
    onClick={() => undefined}
  />
</ItemSet>
Team
AG
Ashley Green
Facilities manager
OB
Ollie Brooks
Lead technician
MG
Mitch Galehouse
Maintenance tech
<ItemSet heading="Team">
  <Item
    text="Ashley Green"
    supportingText="Facilities manager"
    leadingAvatar={{ initials: "AG" }}
    trailing={
      <LinkButton>View profile</LinkButton>
    }
  />
  <Item
    text="Ollie Brooks"
    supportingText="Lead technician"
    leadingAvatar={{ initials: "OB" }}
    trailing={
      <LinkButton>View profile</LinkButton>
    }
  />
  <Item
    text="Mitch Galehouse"
    supportingText="Maintenance tech"
    leadingAvatar={{ initials: "MG" }}
    trailing={
      <LinkButton>View profile</LinkButton>
    }
  />
</ItemSet>
Props
Item
orientation:"default" | "horizontal"= "default"
default = vertical stack; horizontal = label-left / content-right.
label:ReactNode
In default orientation, stacks above content; in horizontal, renders left.
text:ReactNode
Primary text (required for content).
supportingText:ReactNode
Secondary line below text.
leadingIcon:IconDefinition
Leading icon. Ignored when leadingAvatar is set.
leadingAvatar:{ src?, alt?, initials? }
Leading avatar. Takes precedence over leadingIcon.
trailing:ReactNode
Trailing slot — Badge, LinkButton, etc.
onClick:() => void
Makes the item interactive (hover overlay).
ItemSet
heading:ReactNode
Section heading rendered in a muted header row.
description:ReactNode
Optional description below heading.
headingAvatar:{ src?, alt?, initials? }
Leading avatar for the section heading.
children:ReactNode
Item elements separated by a Divider.
Tokens