Header
@stellaria/nebula-webHeaderPropsPreview
Preview
Props
13| Prop | Type | Default |
|---|---|---|
aria-label | string | — |
backIcon | ReactNode | — |
children | ReactNode | — |
className | string | — |
component | ElementType | — |
labels | Partial<HeaderLabels> | — |
leftSection | ReactNode | — |
onBack | (() => void) | — |
order | HeaderOrder | 1 |
rightSection | ReactNode | — |
subtitle | ReactNode | — |
title | ReactNode | — |
withBack | boolean | false |
Slot props
8Each one spreads over an inner element, so you can restyle a region without forking the component.
| Prop | Type | Default |
|---|---|---|
backProps The back button. It only exists with `withBack`, and it spreads AFTER the handler and the label, so it can replace both; the label also has its own route through `labels.back`. | ActionIconProps | — |
bodyProps The band below the row, which is where `children` lands. It does not exist without them. | BoxSlotProps | — |
headingProps The title and subtitle column. Not rendered without `title` or `subtitle`. | BoxSlotProps | — |
leadProps The left group. Not rendered without `withBack` or `leftSection`. | BoxSlotProps | — |
rowProps The row that splits the width between the left group, the heading and the right one. `children` hangs below it, not inside. | BoxSlotProps | — |
subtitleProps The subtitle. Only rendered with `subtitle`. | TextSlotProps | — |
titleProps The title. Its tag comes from `order` (`h1`-`h6`), so `component` here changes the tag without changing the level that is announced. With `component` on the `Header` itself, its `id` names the region and is written AFTER the slot so it cannot be overridden. | TextSlotProps | — |
trailProps The right group. Only rendered with `rightSection`. | BoxSlotProps | — |
Also accepts
On top of its own props, this component forwards these groups.