Modal
This Modal component is employed to present content that momentarily interrupts interactions with the primary view of an application. Modals should be utilized judiciously and exclusively when essential.
API Reference
| Prop | Type | Default |
|---|---|---|
modeless | boolean | false |
show | boolean | false |
Examples
Modeless
Usage
General Guidelines
Do's
- Utilize modals to present critical information or capture essential user input.
- Keep content within modals concise, clear, and relevant to the user's current task.
- Allow users to dismiss the modal easily through the close button or by clicking outside the overlay.
- Utilize it for confirmations and conditional changes.
- Use it when the user is required to take action.
- Use it when you need to display content that temporarily blocks interactions with the main view of an application.
- Utilize it when you need to ask for confirmation from a user before proceeding.
- Use it for important warnings to prevent or correct critical errors.
Don'ts
- Steer clear of excessive modal usage, which can interrupt the user's workflow and cause frustration.
- Refrain from placing crucial information solely within modals.
- Keep modals straightforward and avoid overwhelming users with excessive content or options.
- Avoid incorporating tabs or expanded sections within modals that could burden the interface.
- Never initiate another modal from within an existing modal.
- Avoid chaining a series of modals together. Instead, opt for a multipage creation flow rather than utilizing multiple modals with sequential steps across different pages.
Writing Guidelines
When to use
- Utilize to gather user input essential for accomplishing a particular task or workflow.
- Implement when communicating crucial alerts or pressing information demanding immediate user attention.
- Employ for showcasing supplementary details, configurations, or choices pertinent to the user's present context.
When not to use
- Avoid using modals for tasks that require frequent repetition or continuous user engagement, as it may lead to unnecessary interruptions.Consider making the task doable from the main page.
- Do not utilize modals for displaying long-form content or lengthy descriptions better suited for a separate page or section.
- Avoid using modals for non-essential or optional tasks without interrupting the user's main workflow.
Use Case
General Use Cases
Modal are typically use for displaying login or registration forms.
Presenting confirmation dialogs before proceeding. e.g. Delete, Updating data.
Digital Health Use Cases
For Digital Health Applications modal can be used for confirming medication dosage changes before finalizing.
Also a modal could pop up with detailed medication information (dosage, side effects, interactions) when a user taps on a specific medication in their reminder list.
Accessibility Guidelines
- Add
aria-labelledbyto use it correctly, define an ID for the element you want to use as label and set the property to that ID. - Use
aria-describedbyattribute to provide descriptive text for an element, offering additional context or explanation. - Use
aria-modalto specify that the presence of a “modal” element precludes usage of other content on the page. - Add
aria-haspopupto indicates the availability and type of interactive popup element that can be triggered by the element on which the attribute is set.