Section heading
A section heading names a block of fields in a side panel. It is quiet by design: a value under it is never larger or heavier.
With and without an action
Assignee
Details
Show code
<KbSectionHeading>Assignee</KbSectionHeading>
<KbSectionHeading action={<KbButton variant="ghost" size="sm">Edit</KbButton>}>Details</KbSectionHeading>When to use
- Use it above a group of fields or facts in a side panel.
- Pick the level for the document outline; the look is always heading XS in subtle ink.
- Keep it to one or two words in sentence case.
- For a page's own sections use the page section title, not this.
Customer
CUSTOMER
Import
import { KbSectionHeading } from "@/components/ui/KbSectionHeading";
<KbSectionHeading level={3} action={<KbButton variant="ghost" size="sm">Edit</KbButton>}>Details</KbSectionHeading>Props
| Prop | Type | Default | What it does |
|---|---|---|---|
level | 2 | 3 | 4 | 3 | The document heading level. |
id | string | None | To link the heading to a region with aria-labelledby. |
action | ReactNode | None | A small trailing action, a ghost button or link. |
Keyboard and screen readers
- Renders a real h2, h3 or h4, so the panel is navigable by heading.
- Don't skip levels. A panel under a page title uses 3 or 4.
- The action is its own control with its own name.