DescriptionList

A semantic term/details list with vertical and responsive horizontal layouts.

Preview#

Role
Email: cali@zolplay.com
Joined: May 27, 2026

Controls

Direction

Anatomy#

<DescriptionList>
  <DescriptionItem>
    <DescriptionTerm>
      Role
      {/* Optional term-side control */}
      <Button variant="ghost" size="icon-xs" aria-label="Explain member roles">
        <CircleHelp />
      </Button>
    </DescriptionTerm>
    <DescriptionDetails>
      {/* Values can compose other UI components */}
      <Badge render={<button type="button" aria-label="Change role" />}>
        Owner
        <ChevronDown />
      </Badge>
    </DescriptionDetails>
  </DescriptionItem>
</DescriptionList>

Usage#

Horizontal#

Use direction="horizontal" for compact label/value metadata, such as action-card properties. It returns to one column on small screens.

Client key: release-notes
Redirect URL: https://notes.example.com/oauth/callback
Owner: Atlas

API#WIP

DescriptionList#

Prop	Type	Default	Description
`direction`	"vertical" \| "horizontal"	"vertical"	Vertical preserves the normal item flow. Horizontal aligns direct term/details pairs in a shared grid and returns to one column below sm.
`...props`	useRender.ComponentProps<"dl"> & { direction?: "vertical" \| "horizontal" }	—	Semantic definition-list root. Owns the vertical or horizontal layout shared by its direct items.

DescriptionItem#

Prop	Type	Default	Description
`...props`	useRender.ComponentProps<"div">	—	Groups one term/details pair. Horizontal lists expand direct items into the root grid.

DescriptionTerm#

Prop	Type	Default	Description
`...props`	useRender.ComponentProps<"dt">	—	Theme-styled metadata label. Compose optional controls directly alongside the label.

DescriptionDetails#

Prop	Type	Default	Description
`...props`	useRender.ComponentProps<"dd">	—	Metadata value with the native dd margin reset. Values may contain text, badges, links, or controls.