Modal
A modal opens a temporary dialog for additional fields, actions, or focused editing.
Modals appear on top of the current screen. They let users complete a focused task without permanently adding that content to the main record detail view.
When to Use It
Use a modal when information or actions should be available on demand.
Modals are useful for advanced settings, secondary fields, confirmation steps, edit dialogs, or focused tasks that would clutter the main screen if they were always visible.
Avoid putting essential everyday information only inside a modal. If users need it constantly, it probably belongs directly on the page.
What Can Be Configured
Trigger
A modal is opened through a button or similar control.
- Choose the text or icon users click to open the modal
- Decide whether the trigger should feel like a main action, a small tool, or a secondary option
- Place the trigger near the content or action it belongs to
Dialog Content
The modal can contain its own set of components.
- Add fields, buttons, text, switches, or other components inside the modal
- Give the modal a clear title
- Keep the contents focused on one task or decision
Size and Density
The modal can be sized to fit the work it contains.
- Use a narrower modal for short forms or confirmations
- Use a wider modal when users need to edit several fields
- Avoid making the modal a second full page unless the workflow truly needs it