Attribute list
Displays read-only attributes for a single entity in a responsive, scannable grid.
On this page
This docs is LLM-friendly and available as clean Markdown.
Supported browser agents can also use WebMCP to search, read, and open these docs. Learn more
Usage
import {
GlAttributeList,
GlAttributeListItem,
} from "gitlab-ui-react/attribute-list";<GlAttributeList>
<GlAttributeListItem label="Status">Active</GlAttributeListItem>
<GlAttributeListItem label="Owner">Alex Morgan</GlAttributeListItem>
</GlAttributeList>Default
Use an attribute list for read-only metadata about one entity. The default horizontal layout places concise labels beside their values when space allows and adapts to a single column in a narrow container.
Example attribute list
- Created
- Feb 9, 2026
- Run started
- 2:30 PM
- Runtime
- 5 minutes 42 seconds
- Health
- Healthy
- Owner
- Alex Morgan
- Project
- Design system
import {
GlAttributeList,
GlAttributeListItem,
} from "gitlab-ui-react/attribute-list";
export default function AttributeListExample() {
return (
<GlAttributeList>
<GlAttributeListItem icon="calendar" label="Created">Feb 9, 2026</GlAttributeListItem>
<GlAttributeListItem icon="clock" label="Run started">2:30 PM</GlAttributeListItem>
<GlAttributeListItem icon="hourglass" label="Runtime">5 minutes 42 seconds</GlAttributeListItem>
<GlAttributeListItem icon="status-health" label="Health">Healthy</GlAttributeListItem>
<GlAttributeListItem icon="user" label="Owner">Alex Morgan</GlAttributeListItem>
<GlAttributeListItem icon="project" label="Project">Design system</GlAttributeListItem>
</GlAttributeList>
);
}
Layout
Use the vertical layout for longer labels or when each label-value pair should be read as a distinct block. Both layouts respond to their container width.
Vertical attribute list
- Merge request author
- Alex Morgan
- Most recent approval
- Yesterday at 4:20 PM
- Target branch
- main
- Pipeline status
- Passed
import {
GlAttributeList,
GlAttributeListItem,
} from "gitlab-ui-react/attribute-list";
export default function AttributeListVerticalExample() {
return (
<GlAttributeList layout="vertical">
<GlAttributeListItem label="Merge request author">Alex Morgan</GlAttributeListItem>
<GlAttributeListItem label="Most recent approval">Yesterday at 4:20 PM</GlAttributeListItem>
<GlAttributeListItem label="Target branch">main</GlAttributeListItem>
<GlAttributeListItem label="Pipeline status">Passed</GlAttributeListItem>
</GlAttributeList>
);
}
Rich content
Values can contain links, badges, code, and other inline components. Keep values concise; truncate long identifiers when they would disrupt the grid.
Attributes with rich values
import {
GlAttributeList,
GlAttributeListItem,
} from "gitlab-ui-react/attribute-list";
import { GlBadge } from "gitlab-ui-react/badge";
import { GlLink } from "gitlab-ui-react/link";
export default function AttributeListRichContentExample() {
return (
<GlAttributeList>
<GlAttributeListItem icon="code" label="File">
<code>devfile.yaml</code>
</GlAttributeListItem>
<GlAttributeListItem icon="work-item-issue" label="Issue">
<GlLink href="#issue">#12345</GlLink>
</GlAttributeListItem>
<GlAttributeListItem icon="merge-request" label="Merge request">
<GlBadge href="#merge-request" icon="merge-request" variant="success">
!12345
</GlBadge>
</GlAttributeListItem>
</GlAttributeList>
);
}
Accessibility
GlAttributeListuses a semanticdl, with each item represented by a relateddtlabel andddvalue.- Keep labels concise, use sentence case, and apply the same labels to comparable entities.
- Item icons are decorative and hidden from assistive technology. Use them consistently across a list and never rely on an icon alone to identify an attribute.
- Preserve meaningful text alternatives in custom label and value content.
- Order attributes by importance or reading sequence. In a two-column layout, focus and reading order run down the first column before the second.
- Use separate lists for separate entities and a table when users need to compare the same attributes across multiple entities.
API
These are the props used most often. The list forwards supported dl attributes and a ref; each item forwards supported div attributes and a ref.
GlAttributeList
| Prop | Description | Default |
|---|---|---|
layout |
Places labels beside values with horizontal or above values with vertical when space allows. |
"horizontal" |
labelClassName |
Adds classes to every item label. | — |
descriptionClassName |
Adds classes to every item value. | — |
children |
Direct GlAttributeListItem elements; arrays, fragments, and conditional children are supported, but opaque wrapper components are not. |
— |
GlAttributeListItem
| Prop | Description | Default |
|---|---|---|
label |
Required attribute term rendered inside a dt. Accepts React content. |
— |
icon |
Adds a decorative GitLab SVG icon before the label. | — |
labelClassName |
Adds classes to this item’s label after list-wide label classes. | — |
descriptionClassName |
Adds classes to this item’s value after list-wide value classes. | — |
children |
Attribute value rendered inside a dd. Accepts React content. |
— |