Components / data-display
Description List
Label and value pairs: the facts about one thing (a file, an order, a member).
import { DescriptionList } from '@basiiik/ui';
The snippet an agent gets
From get_component_snippet, with the required props filled in from the spec. Every snippet is type-checked against the library before it is shipped.
import { DescriptionList, DescriptionItem } from '@basiiik/ui';
<DescriptionList><DescriptionItem term="Owner">Ada Lovelace</DescriptionItem></DescriptionList>- No interactive states.
- Compose with: badge.
- Storybook: Data display/Description List.
Props
| Prop | Type | Notes |
|---|---|---|
layout | "inline" | "stacked" | Default "inline" |
children required | ReactNode | |
divided | boolean |
States. No interactive states.
Native attributes such as className, id and data-* are forwarded to the root element.
Parts
DescriptionItem
One term and its value. term is the label; the children are the value (text, a Badge, a Link).
<DescriptionItem term="Owner">Ada Lovelace</DescriptionItem>DescriptionItem props
| Prop | Type | What it does |
|---|---|---|
term required | ReactNode | The label, e.g. "Owner". |
children required | ReactNode | The value: text, a Badge, a Link. |
Use it when
- The facts about one thing: a file in a details drawer, an order summary, a member profile, project meta
- Review steps that repeat what someone entered
Do not use it when
- Many records with the same fields (use Table)
- Editable settings (use form fields with labels)
- A list of items without labels (use List)
Rules for agents
- Put DescriptionItems inside a DescriptionList; each needs a
termand its value as children - Use
layout="stacked"in panels narrower than about 360px - Keep terms short and values formatted (dates, sizes, money) before passing them
- Show a status as a Badge, not as coloured text
Avoid
- A hand-built <dl> or a grid of divs for label and value pairs
- Using a Table with two columns for one record's facts
- Bold terms or values in colours other than the defaults
- Empty values: write "None" or "Not set" instead of leaving the row blank
Writing the content
- Terms: nouns in sentence case, no colon: "Owner", "Created"
- Values: the fact alone: "12 March 2026", "2.4 GB of 10 GB"
Accessibility
- A native <dl>: each DescriptionItem is a <div> with a <dt> (term) and a <dd> (value), so a screen reader pairs them
- Values can hold any content: text, a Badge, a Link
Colour tokens it reads
color.border.subtlecolor.text.primarycolor.text.secondaryRelated
data-display 2 Figma variants Try it in the live demo