Surface & Panel
Named elevation treatments and the header/body/footer shell shared by panel-shaped components.
Surface
Surface is a Box pre-set to one of the library's named elevation treatments. An elevation prop sets background, border, radius, and shadow together from one named tier.
| Prop | Type | Default | Description |
|---|---|---|---|
elevation | "sunken" | "flat" | "raised" | "overlay" | "dialog" | "flat" | Elevation level. Sets background, border, radius, and shadow. |
as | ElementType | "div" | Polymorphic element type. |
Elevations
Each individual property is still an ordinary style prop, so you can override any part: <Surface elevation="overlay" rounded="lg"> overrides the elevation's default radius. Passing undefined explicitly keeps the elevation default.
Panel
Panel consists of three components: PanelHeader, PanelBody, and PanelFooter. Together they form the structured header/body/footer shell that Card, Modal, Drawer, PopoverPanel, and HoverCard all share.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | The header title. Plain text or a Text component. |
sub | ReactNode | — | Secondary label beside or below the title. |
subMono | boolean | — | Renders sub in a monospace font. |
subPlacement | "inline" | "block" | "inline" | Place sub trailing the title or beneath it. |
right | ReactNode | — | Right-aligned slot: actions, counts, status. |
onClose | () => void | — | Renders a close button at the trailing edge. |
density | "compact" | "default" | "roomy" | "default" | Controls inner padding. |
size | "md" | "lg" | "md" | Larger title, for dialog-scale headers. |
plain | boolean | — | Removes the bottom border. |
banded | boolean | — | Tinted background band. |
Header variants
PanelFooter
PanelFooter has a left prop for left-aligned content (like a step counter or record count) and places everything else on the right. Common patterns are action buttons, pagination, and status summaries.
| Prop | Type | Default | Description |
|---|---|---|---|
left | ReactNode | — | Left-aligned slot (step counter, record count). Everything else right-aligns. |
density | "compact" | "default" | "roomy" | "default" | Controls inner padding. |
plain | boolean | — | Removes the top border. |
banded | boolean | — | Tinted background band. |
Panel density
All three panel parts accept a density prop: "compact", "default", or "roomy". It controls the inner padding of each part, so a dense panel for a data-heavy dashboard and a roomy one for a settings dialog can use the same markup.
Composing surfaces
Surface is the elevation base; Panel adds the header/body/footer structure. Together they form the pattern used by cards, dialogs, and flyouts in Onset.