Bottom panel

Alternatives

• Bottom drawer — A modal dialog that slides in from the bottom. Use it for forms and tasks that need the user's full attention.

BottomPanel

A bottom panel is a non-modal surface that floats at the bottom of the viewport. It holds actions and short status that relate to what the user is currently doing on the page, such as bulk actions on a set of selected rows.

• The page underneath must stay fully interactive. A bottom panel never renders a blanket, traps focus or locks scroll.
• There can only be one bottom panel visible at a time.
• Show the panel in response to page state, such as a non-empty selection, and hide it when that state goes away. Don't use it as a permanent footer.
• Keep the content to a single row of controls: a short status, a way to dismiss, and one or two actions. Anything larger belongs in a bottom drawer.
• Overlays opened from controls inside the panel, such as comboboxes and menus, are fine. Don't render drawers or dialogs inside the panel itself.
• Always provide a meaningful aria-label, since the panel has no title.

Placement

The panel is fixed to the viewport and centred within it. When the app has a persistent sidebar, use the offset prop so the panel is centred within the content column, and keep that offset consistent across pages of the same app.