Overlays
Bottom sheet
The mobile counterpart of a drawer.
Examples
On small screens a sheet replaces a menu or popover
Anatomy
| # | Part | Description | Presence |
|---|---|---|---|
| 1 | Grab handle | Decorative, drag is optional | Required |
| 2 | Title | Names the sheet | Required |
| 3 | Content | Actions or form | Required |
Specifications
| Width | 390px, mobile fluid |
|---|---|
| Scrim | #00000066 (60% alpha) |
Interaction
| Key | Result |
|---|---|
| Esc | Closes |
| Tab | Cycles inside |
| Trigger | Response |
|---|---|
| Swipe down | Dismisses |
| Tap scrim | Dismisses |
Accessibility
role · dialog (modal)
2.5.7Dragging Movements2.1.2No Keyboard Trap4.1.2Name, Role, Value
| Requirement | How Rig meets it |
|---|---|
| Alternative to drag | A visible Close or Cancel (WCAG 2.5.7) |
| Width | 390px fluid |
| Safe area | Content clears the home indicator |
Read the matching WAI pattern ↗
Usage
| Do | Don’t |
|---|---|
| Use on mobile instead of a popover | Do not make swipe the only way to close |