AdminTopbar
A compact, named application control region with deterministic start, center, and end zones.@gemologic/sheen-patterns · applicationPlayground
This example has no scalar controls. Its validated source remains interactive below.
<AdminTopbar start={<strong>Northstar</strong>} center={<span>Orders</span>} end={<button type="button">Create</button>} />Variant matrix
Application controls
Anatomy
- Package
@gemologic/sheen-patterns- Source
packages/patterns/src/AdminTopbar.tsx- Tokens
--sheen-color-bg-raised--sheen-color-border--sheen-space-inline-sm
Accessibility
Role: regionKeyboard: Tab, Shift+TabDo
- Use AdminApp placement resolution for production shell chrome.
Do not
- Do not duplicate a semantic control in more than one zone.
Generated props
| Name | Type | Default | Description |
|---|---|---|---|
label | string | Application controls | Accessible region name. |
start | JSX.Element | — | Start-aligned semantic chrome, resolved once. |
center | JSX.Element | — | Center semantic chrome with bounded horizontal overflow. |
end | JSX.Element | — | End-aligned semantic action chrome, resolved once. |