OVERLAYS / COMPONENTS
Modal
Give one decision focused attention.
About modal
A Modal is an interactive UI overlay that captures users' attention by presenting content or actions in a layer above the main interface, often used for prompts, confirmations, or supplementary information. By temporarily interrupting the user flow, it ensures focus on a specific task or message, providing a more immersive and controlled user experience.
Anatomy
Shared parts, named consistently.
- 1Modal bodyRequired
Outer container of Modal
- 2Content areaRequired
Designated content area
- 3BackdropRequired
Decorative element for obscuring UI beneath modal
- 4Close buttonRequired
Dismisses modal and backdrop.
Try the default
A working example with the shared V1 visual language.
When to use
Use only when the current task needs an immediate decision. Keep the title, close control, and outcome explicit.
Focus is contained in the native modal. Escape closes; closing restores focus to the trigger.