Overview
Modals can be used to display a simple task, to confirm actions, prompt users to input information, or display additional information.
While Modal dialogs are highly versatile, they are not suitable for every use case. They can feel intrusive and are best used sparingly. Before using a Modal, consider the following alternatives:
Alternative | Description |
|---|---|
Non-modal dialogs (Drawer) | Use the Drawer for non-critical interactions that don't block the user. |
Go inline (Nested Card) | Display your content inline to minimize disruption. |
Expanding elements | Use components like Expandable Cards, Tooltips, or Drawers (or other modeless elements. |
New page | Redirect the user to a separate page to isolate the interaction while preserving access to navigation and other functionality. |
Undo patterns | Rather than using confirmation modals, consider providing an inline “Undo” option to streamline user interactions and improve efficiency. |
Anatomy
Basic Usage
How to use this component
Use a concise title to inform the user of what action they are about to take. Always include the primary and secondary buttons on the bottom right corner of the modal. Make sure the primary button copy corresponds to the action that the user is taking. For example, if the title says, “Generate something” the primary button should say “Generate” or “Confirm”.'
Margin
Make sure to have a 36px margin on each side of the modal and that the content does not bleed into the edges.
Spacing
Make sure to add 32px spacing between the title and the content below and 24px spacing between each of the components inside of the modal. Add 32px between the last content and the CTA buttons.
Sizes, Responsiveness, & Overflow
Our modals have fixed widths and are available in three predefined sizes:
- Small: 400px
- Default: 600px
- Large: 960px
The large modal is responsive and adapts to smaller screens, with its width reducing to 720px at the smallest breakpoint. This typically occurs on monitors narrower than 1024px.
If your modal content requires scrolling or overflow behavior, we recommend exploring alternative solutions, such as navigating the user to a dedicated page, to enhance usability and provide a better experience.
