DescriptionList

The DescriptionList component presents record metadata with semantic dl, dt, and dd elements for detail panels and backoffice review screens.

Import

import {
  DescriptionList,
  DescriptionListActions,
  DescriptionListDescription,
  DescriptionListItem,
  DescriptionListTerm,
} from '@nim-ui/components';

Basic Usage

Order Details

View Code

<DescriptionList aria-label="Order details" variant="inline">
  <DescriptionListItem>
    <DescriptionListTerm>Order ID</DescriptionListTerm>
    <DescriptionListDescription>ORD-4821</DescriptionListDescription>
  </DescriptionListItem>
  <DescriptionListItem>
    <DescriptionListTerm>Customer</DescriptionListTerm>
    <DescriptionListDescription>Northwind Supply</DescriptionListDescription>
    <DescriptionListActions aria-label="Customer detail actions">
      <Button variant="outline" size="sm">Open profile</Button>
    </DescriptionListActions>
  </DescriptionListItem>
</DescriptionList>

Props

DescriptionList

Name	Type	Default	Description
variant	"default" | "inline"	"default"	Layout style for the metadata rows.
className	string	-	Additional classes for spacing or container constraints.

Backoffice Guidance

• Use DescriptionList for facts about one record, not tabular collections.
• Use variant="inline" in side panels and drawers where label alignment matters.
• Keep row actions contextual and grouped with DescriptionListActions.