Layout
Topbar
The header strip: page context, search, notifications, theme toggle and the account menu.
Not documented yet
This component ships in the design system and is fully supported. What is missing is the guidance around it: when to reach for it, the do and don't, and the accessibility notes. Until that is written, Storybook is the reference for variants, props and live controls.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
themerequired | "light" | "dark" | — | Current theme. Used for the toggle's accessible label only — which glyph is visible is driven by the `.dark` class on `<html>` via CSS, so the correct icon paints immediately without waiting for hydration. |
onToggleThemerequired | () => void | — | Called when the theme toggle is pressed. |
userName | string | undefined | "Josephine Lim" | Name shown in the account menu. |
userRole | string | undefined | "HR Admin" | Role shown under the name in the account menu. |
notifications | number | undefined | 0 | Unread count on the notifications bell; the badge is hidden when 0. |