Resources
Intro & Anatomy
Modals display secondary, non-critical information to users, requesting rather than requiring their input or interaction.
Use modals when offering users secondary information to their current flow, e.g. options for replacing an unavailable product in their cart, or for marketing purposes such as newsletter subscriptions.
Options & Styles
Content
Image is optional and can provide visual context or branding for the modal content.
Title is mandatory to clearly communicate the modal's purpose.
Content is mandatory and can either be text or replaced by custom content depending on the modal's purpose.
Actions (buttons) are mandatory to provide user response options.
Close button in the top right is mandatory to allow easy dismissal.
Best Practice & Usage
Modals should present helpful but non-essential information that enhances the user experience without interrupting critical workflows. Use clear positioning and appropriate timing for optimal user engagement.
Unlike dialogs, modals present supplementary content that enhances the user experience without being essential for task completion. They provide additional context, options, or promotional content that users can choose to engage with or dismiss.
Use modals to display non-critical, secondary information or for marketing purposes.
Modals are not to be used for critical, high priority information or tasks. Use alert dialogs instead.
Modals should be placed in the centre of the screen on any screensize bigger than mobile. Set the background to your defined scrim colour.
Don't position modals off-centre or on any coloured overlays.
Position modals at the bottom of the screen on mobile devices for better usability.
Avoid centring modals on mobile screens.
Theming
You can customise colours, border radius and width, font styles, shadows, scrim colour, and spacings to match your design requirements whilst maintaining accessibility and usability standards.