1 viewer
Component · Overlay
BottomSheet
Focus-managed bottom sheet for compact-screen creation and action flows.
- Category
- Overlay
- Slots
- 7
- States
- 4
- Writer
- Shared
Preview
<BottomSheet title="Available Options" trigger="Open Mobile Options">
<Text
text="Contextual actions anchored to the viewport bottom on mobile."
/>
</BottomSheet>Anatomy
The named parts of the rendered markup. Recipes style these hooks, and every renderer keeps them stable.
| Slot | DOM class |
|---|---|
| root | .primitive-bottom-sheet |
| backdrop | — |
| handle | — |
| header | — |
| title | — |
| close | — |
| body | — |
States and platforms
The states the contract publishes, the platforms it declares, and the style recipes that dress it.
States
Platforms
Recipes
Renderers
Every tag in the example above renders through a shared writer.
Declared adapters. A status is the manifest's declaration, not a measured parity result.
| Target | Renderer | Status |
|---|---|---|
| web | react | experimental |
| runtime-node | view-node | ready |
| ssr | html-semantic | ready |
| terminal | terminal-text | planned |
| native | native-adapter | experimental |
Accessibility
Uses dialog semantics while anchoring the panel to the bottom edge.
- Dialog has role=dialog, aria-modal, and either a visible title or an aria-label.
- Escape and backdrop dismiss return focus to the triggering control unless the sheet explicitly disables those accidental-dismiss paths.