Meta list
A meta list is one quiet line of facts about an object. Each item can be text, a time, a chip or a link button; a dot between facts is decorative.
Facts and controls
Facts are separated by a dot. A control is bare: no dot before it. A long name shrinks with an ellipsis and keeps its full text in the tooltip.
Show code
<KbMetaList label="Request facts" items={[
{ key: "channel", content: "Chat" },
{ key: "name", content: "Ana Ruiz", shrink: true, title: "Ana Ruiz" },
{ key: "age", content: <time dateTime="2026-11-01T09:00:00Z">2h ago</time> },
{ key: "help", bare: true, content: <KbLozenge tone="ruby" loud>Needs help</KbLozenge> },
{ key: "replay", bare: true, content: <KbLinkButton href="/design" variant="ghost" size="sm">Watch replay</KbLinkButton> },
]} />When to use
- Use it under an object header for channel, person, age and the controls that belong to the object.
- Keep to facts a person scans in a glance. Put the rest in the details panel.
- Give each fact a title when it is shortened, so the full text is still readable.
- Mark items wideOnly when the details panel already offers them; they hide when the header is narrow.
Import
import { KbMetaList } from "@/components/ui/KbMetaList";
<KbMetaList label="Request facts" items={[
{ key: "channel", content: "Chat" },
{ key: "name", content: "Ana Ruiz", shrink: true, title: "Ana Ruiz" },
]} />Props
| Prop | Type | Default | What it does |
|---|---|---|---|
label | string | None | Required. Names the list for screen readers. |
items | KbMetaEntry[] | None | Facts and controls. Falsy entries are skipped, so conditions can sit inline. |
| Prop | Type | Default | What it does |
|---|---|---|---|
key | string | None | Stable React key. |
content | ReactNode | None | Text, a time, a link button or a chip. |
bare | boolean | false | A control, not a fact: no dot before it. |
shrink | boolean | false | Truncates with an ellipsis when the line is full. |
wideOnly | boolean | false | Hidden when the nearest object header is narrow. |
title | string | None | Full text for a shortened item. |
Keyboard and screen readers
- A real list with a name, so a screen reader announces how many facts there are.
- The dot between facts is aria-hidden; it is decoration.
- Controls inside keep their own names and focus ring.
- Times use the time element with a machine-readable value.