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
