ComponentsData Display
DescriptionList
Semantic label-value metadata for detail panels, drawers, and record pages
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 ID
- ORD-4821
- Warehouse
- Bangkok 02
- Customer
- Northwind Supply
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
DescriptionListfor 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.