Object header
An object header names the thing you are looking at: its key, status and title on one row with its actions, and one quiet line of facts beneath. It is never taller than it needs to be.
Key, status, title, actions, facts
Show code
<KbObjectHeader
objectKey={<KbKey>KB-1042</KbKey>}
status={<KbLozenge tone="sky">Open</KbLozenge>}
title="Cannot export my report"
actions={<KbButton variant="primary" size="sm">Resolve</KbButton>}
meta={<KbMetaList label="Request facts" items={facts} />}
/>A long title
The title stays on one line with an ellipsis, or two lines when asked. The full text is the tooltip.
Show code
<KbObjectHeader title="…" titleLines={2} />When to use
- Use one at the top of a detail view for a request, a customer, a rule or a flow.
- Put the one gold action in the actions slot. Everything else is ghost or secondary.
- Show the status once, here. Don't repeat it in the facts.
- Keep the facts to one line. Move the rest to the details panel.
Import
import { KbKey, KbObjectHeader } from "@/components/ui/KbObjectHeader";
<KbObjectHeader
objectKey={<KbKey>KB-1042</KbKey>}
status={<KbLozenge tone="sky">Open</KbLozenge>}
title="Cannot export my report"
actions={<KbButton variant="primary" size="sm">Resolve</KbButton>}
meta={<KbMetaList label="Request facts" items={[…]} />}
/>Props
| Prop | Type | Default | What it does |
|---|---|---|---|
title | string | None | Required. One line with an ellipsis; the full text is the tooltip. |
titleLines | 1 | 2 | "auto" | "auto" | Auto is one line, two on narrow screens. |
level | 2 | 3 | 2 | Document level of the title. |
objectKey | ReactNode | None | Leading identifier, usually a KbKey. |
status | ReactNode | None | A lozenge or status select. Shown once. |
actions | ReactNode | None | Trailing actions; the one gold action goes here. |
meta | ReactNode | None | A KbMetaList. |
children | ReactNode | None | Anything under the header, such as an inline error. |
| Prop | Type | Default | What it does |
|---|---|---|---|
children | ReactNode | None | The identifier, in the code face. |
Keyboard and screen readers
- A header element with a real heading (h2 by default) for the title, so the view is navigable by heading.
- The title is clamped visually but its full text is in the DOM and the tooltip.
- Actions keep their own names and shortcuts; the layout never changes tab order.
- At narrow widths items marked wideOnly hide instead of wrapping.