Overlays
Drawer
A side panel for filters, trees and temporary flows.
Examples
Modal side panel: same focus rules as Dialog
Anatomy
| # | Part | Description | Presence |
|---|---|---|---|
| 1 | Panel | Fixed width, full height | Required |
| 2 | Header | Title and close button | Required |
| 3 | Content | Scrolls | Required |
| 4 | Footer | Actions | Optional |
Specifications
| Width | Fixed |
|---|---|
| Height | Full viewport |
Interaction
| Key | Result |
|---|---|
| Tab | Cycles inside |
| Esc | Closes |
| Trigger | Response |
|---|---|
| Open | Slides from the edge in 300ms |
| Scrim click | Closes |
Accessibility
role · dialog (modal)
2.1.2No Keyboard Trap2.4.3Focus Order4.1.2Name, Role, Value
| Requirement | How Rig meets it |
|---|---|
| Same as Dialog | <dialog> with showModal(), labelled by its title |
| Reduced motion | Appears without sliding |
| Close | Visible button with a name |
Read the matching WAI pattern ↗
Usage
| Do | Don’t |
|---|---|
| Use for filters and secondary tasks | Do not use for the primary flow |