🎉

Modals

Component

Features

Each visible item to be shown on this page.

Title

Clear, simple text that explains the action of the modal

Descriptive text

Elaborating on the title about the action of the modal, explaining what options are available and their consequences

Button/s

To click and cause an 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
⭐️ If using a button to close, clearly indicate with copy 'Close' or 'Cancel'

Responsiveness

A pop up window needs to be considered for the window of a mobile, tablet and desktop

Background change

Darken, blur or lighten - it's important to change the background behind the modal to bring focus to it