Components / Patterns
Page header
The name of the page, a one-line description and the primary action.
@fabrials/ui
Accounts
Provider connections for this workspace.
Installation
Import the control from
@fabrials/ui, after setting the app up.TypeScript import { PageHeader } from "@fabrials/ui";
API reference
| Prop / export | Type | Description |
|---|---|---|
title | ReactNode | Page heading. |
description | ReactNode | What this page is for. |
actions | ReactNode | The primary action. |
headingLevel | 1 | 2 | 3 | 4 | The heading element (h1 by default). The look is the page title's at every level. |
headingRef / headingProps | Ref / { tabIndex, id, data-* } | For code that moves focus to the heading after a route or tool change: give it tabIndex -1. A focused heading shows a ring. |
Behavior
One page heading. Put the action next to the task it performs.
Accessibility
Keyboard and contrast
Keep visible labels, keyboard focus and status announcements when customizing. These components inherit your theme; maintain sufficient contrast in both color modes. The preview is keyboard operable.