OverlaysBottom panel
Bottom panel
A bottom panel is a non-modal surface that floats at the bottom of the viewport while the page underneath stays interactive.
BottomPanelProps
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
'aria-label' | string | Yes | — | Accessible name for the panel, e.g. "Bulk actions". Required because the panel is blank and has no title of its own. |
children | ReactNode | Yes | — | Panel content. The panel adds no padding, compose the inside with layout primitives such as `Box`, `Flex` or `Inline`. |
id | string | — | — | Id of the panel element, e.g. as an `aria-controls` target. |
isOpen | boolean | Yes | — | Controls visibility. The panel mounts and slides in when `true`, slides out and unmounts when `false`. |
maxWidth | number | string | — | — | Upper bound on the panel width. The panel is as wide as its content and horizontally centred. Defaults to the available width. |
minWidth | number | string | — | — | Lower bound on the panel width. The panel is fixed to the viewport and cannot scroll, so keep this below the narrowest viewport you support or its left edge is cut off there. |
offset | BottomPanelOffset | — | — | Shifts the fixed area the panel is centred in, e.g. `{ left: 90 }` to centre it within the content column beside an app sidebar, or a `bottom` value to raise it above a page footer. Defaults to the full viewport width and a `spacing.large` gap from the bottom edge. |