Overlays

Dialog

A modal for focused, deterministic decisions with header, content slot and action zone.

Examples

Click to try: focus is trapped, Esc closes, focus returns to the button

Dialog anatomy
#	Part	Description	Presence
1	Container	28px blur, stacked shadows	Required
2	Title	Heading, names the dialog	Required
3	Content slot	Agnostic	Required
4	Actions	Right aligned, primary last	Required
5	Close	Button or Cancel	Required

Sizes	Small · Medium · Large
Padding	20px · 24px · 28px
Surface	28px backdrop blur with stacked deep shadows

Keyboard
Key	Result
`Tab` `Shift+Tab`	Cycles inside the dialog
`Esc`	Closes
`Enter`	Activates the focused button

Pointer and touch
Trigger	Response
Open	Scale 0.96 to 1 and fade, 200ms
Backdrop click	Closes non-destructive dialogs
Close	Focus returns to the element that opened it

role · dialog (modal)

2.1.2No Keyboard Trap2.4.3Focus Order2.4.11Focus Not Obscured4.1.2Name, Role, Value

Requirements
Requirement	How Rig meets it
Native element	<dialog> with showModal() gives focus trapping, inert background and Esc
Name	aria-labelledby on the title; aria-describedby on the message
Initial focus	On the least destructive action, or the first field
Return focus	To the trigger
Scroll	Lock page scroll; content scrolls inside
Reflow	Works at 320px width

Do and don’t
Do	Don’t
Ask one question	Do not open a dialog on page load
Name the action: Delete project, not OK	Do not stack dialogs