Primitive
Sheet
A modal surface: bottom sheet on phones, side panel on wider screens.
States
Open (panel)
side panel on wide screens, bottom sheet on phones
Open (bottom)
When to use
- Event detail on a phone.
- Anything that needs the user's full attention briefly.
When not to
- For confirmation of a hard rule. Use HardRule’s built-in hold or acknowledgement path.
Props
| Name | Type | Notes |
|---|---|---|
| open / onClose / title / side | side="panel" slides from the right on wide screens. |
* required
Accessibility invariants
- role=dialog, aria-modal, labelled by its title.
- Focus moves in on open, is trapped, and returns on close. Escape and the backdrop close it.
- Body scroll is locked while open.
Agent instructions
For anything generating UI from this system
Use for transient detail. Always pass a title. Keep one sheet open at a time. Background branches become inert and regain their prior state on close.