Modal

Overview

Modal is a labelled dialog pattern with motion added after focus, Escape, scroll lock, and restore behavior are solved.

Use it for short, interruptive tasks where a dialog is genuinely better than an inline section: confirmation, demo preview, compact form, media lightbox, or contextual help. The page job is temporary focus, not hiding depth.

The risk in production is broken focus. The dialog must be labelled, focus-trapped while open, closable with Escape, and return focus to the trigger.

Install

Usage

Component Code

Example Production Use Case

A product page can use Modal for a short demo preview or confirmation flow when the trigger remains obvious and closing returns the visitor to the exact point of action.

Best Used For

• Short dialogs where temporary focus helps the task.
• Demo previews, confirmation steps, compact forms, and media lightboxes with clear close behavior.
• Desktop interactions that can become drawers or inline sections on mobile.

Not For

Not for long pages, dense forms, core pricing details, or content that would work better as an inline section or drawer.

Performance Budget

Mount heavy modal content only when needed, keep open/close transitions short, and avoid blocking route or scroll restoration after close.

Accessibility and Mobile

Label the dialog, trap focus only while open, close with Escape when safe, and restore focus to the trigger. On mobile, use a drawer or inline section when the content is long.

Common Mistakes

• Opening a modal without a clear title or accessible label.
• Failing to return focus to the trigger.
• Putting long task flows inside a cramped dialog.