Feedback
Modal
Modal component displays important information, confirmations, or actions in a focused overlay above the main interface. It requires user interaction before returning to the underlying content.
Examples
AccessibilityWCAG 2.1 Level AA Compliant
Features6 checks
- role="dialog" and aria-modal="true"
- Focus trapped within modal
- ESC key closes modal
- Focus returns to trigger on close
- Overlay prevents interaction with background
- aria-labelledby for modal title
When to use this component
✓Do's
- •Confirm destructive or irreversible actions.
- •Present tasks that require the user's full attention.
- •Preview content without navigating away from the current page.
- •Display critical warnings that require immediate user action.
✗Don'ts
- •For brief status messages or notifications, use a Toast.
- •For navigation or browsing content, use a dedicated page.
- •For long or complex forms, use a dedicated page.
- •For non-critical information, use an Alert or Banner
Do's and Don'ts
✓ Do's
For destructive flows use the error status (red border + destructive #db372d button) and specific labels, "Delete Application" is clearer than "OK".
✗ Don'ts
Don't use generic labels like "OK" / "No", and don't use the brand-purple primary button for a destructive action, switch to the error status so the danger is obvious.