Overlays
Backdrop
The scrim behind overlays. Click outside to dismiss.
Examples
The scrim is 55% dark with a 28px blur; clicking it closes the dialog
Anatomy
| # | Part | Description | Presence |
|---|---|---|---|
| 1 | Scrim | 55% dark, 60% light | Required |
| 2 | Blur | 28px | Required |
Specifications
| Alpha | 55% dark · 60% light |
|---|---|
| Blur | 28px |
Interaction
| Key | Result |
|---|---|
| Esc | Closes the dialog that owns it |
| Trigger | Response |
|---|---|
| Click | Closes the dialog unless it blocks a destructive choice |
Accessibility
role · scrim
1.4.11Non-text Contrast2.1.2No Keyboard Trap
| Requirement | How Rig meets it |
|---|---|
| Not content | Decorative; the dialog is modal so the page behind is inert |
| Contrast | Scrim keeps the dialog at 3:1 against its surroundings |
| Reduced motion | Fade only, no blur transition |
Read the matching WAI pattern ↗
Usage
| Do | Don’t |
|---|---|
| Use a scrim whenever the page behind should not be used | Do not use a scrim for non-modal popovers |