Title
Clear, simple text explaining the action of the modal
âī¸ Ensure your icon is recognisable in all possible sizes it's displayed at, and whether the detail needs to be simplified at a smaller size
Actionable item
A button or link to continue or close the event
âī¸ Users should always have an idea where they will be going to, or what event will happen before clicking a button
âī¸ If your button has generic copy such as 'Okay' or 'Cancel', include a label above it describing the event or purpose of the button
Close action
A way to exit the modal
âī¸ Let users click outside the modal to automatically close it
âī¸ Incorporate the close action into the action with negative intent e.g. the button to cancel also closes the modal when pressed
Responsiveness
Consider the size of the modal on different device sizes, and whether a modal is suitable on all
âī¸ On mobile, adapt the modal to full screen to gain more space
Background change behind modal
Darken, blur or lighten - change the background behind the modal to bring focus to it
Description
Incase they require more information to understand how to make their decision
