UI COMPONENTS / Dialog

Dialog. trap the focus.

Accessible modal dialogs opened from any trigger by shared ID.

Root + 5 atoms / Accessible / Composable

Dialog · runtimeATOMIC

Looping preview · focus trap + return focus

Why it's good

Behavior, handled.

Dialog owns the parts that are tedious and easy to get wrong – so you can focus on the layout and the brand.

Compositions

Different structures made from the same atoms.

Remote modalATOMIC

Dialog Trigger opens a Dialog by shared ID, so the button and dialog surface can live in different parts of the layout.

Component model

Confirm flowATOMIC

A confirmation keeps accessible naming in Dialog Title and Dialog Description while custom controls live in the default slot.

Component model

Command panelATOMIC

Command Dialog
- Dialogroot
  - Dialog Titleatom
  - Default Slotslot
  - Dialog Closebtn

Dialog can host a dense command surface in its default slot while Dialog Close remains the family close control.

Component model

More UI Components

Expandable sections with keyboard nav, ARIA, and animated panels.

Tabbed panels with an optional responsive accordion fallback.

Slide-in panels with focus trap and escape close.

Ready?