Figma component
Healthy
Show details
Overview
Key Features
- Size Options: Offers twp built-in sizes for different use cases.
- Dismissibility: Optional close icon for user-controlled dismissal.
- Customizable with slots: Header, body, and footer areas can be replaced with custom layouts.
- Accessibility: Fully keyboard navigable and screen-reader accessible.
Anatomy
- Header: The header includes a title, an optional subtitle (toggled off by default), and a close icon. If needed, the entire header can be replaced with a custom slot.
- Body: The body uses a simple text field by default. However, you can replace it with a custom slot to add text, forms, or other interactive elements based on your content needs.
- Footer: The footer includes two buttons: a primary action and a cancel action. A set of “danger” buttons can also be activated via toggle. Alternatively, the entire footer can be replaced with a custom slot.
- Close Icon (X): The “X” icon allows users to close the dialog without submitting any data.
- Overlay: A screen overlay that obscures the underlying page content. By default, it is not dismissible, but this behavior can be customised through code.
Look and Feel
Customizable via slots
The dialog component in Figma is designed with three customizable slots to maintain flexibility while ensuring visual consistency. Each slot corresponds to a specific section of the dialog: header, body and footer. Using local components each section or slow can be replaced with custom content.
The custom body slot should be configured to “fixed width” for proper dialog resizing.
Best Practice
Do
Use dialogs for scenarios where a dialog is appropriate for example, confirmations, alerts, or form inputs
Do
Use dialogs when you need to ask a confirmation from a user before proceeding.
Do
- Keep titles short and concise. The title should be brief and clearly describe the dialogs’s task or purpose. Use the optional subtitle to set the context for the information in the dialog.
- Use descriptive words for the action buttons like Add, Delete, Save and avoid vague words like Done or OK.
Don't
Avoid triggering additional modals from within a modal. Tasks requiring confirmation should not be performed in a modal.
Links
The Figma file holds the latest UI designs, while the Web Component, Blazor, Angular, React, and VueJS links offer a live demo of components in various states, themes, and interactions.
Feedback
Have feedback, an idea, or a bug to report? Head over to our Contributions page.