Modal

[weigelcinthya]

Modal

A modal is a dialog box that is displayed on top of the current page or another dialog box.

Functionality

→ Appear as a result of user interaction.

→ Used to provide additional information in context.

→ Used when you want to interrupt the user flow to something more important (e.g alertdialog)

→ Used for requesting input from the user.

Best practices

1. always give clear exit routes to the user.
2. give a descriptive title
3. give the action buttons inside the modal clear names
4. give context to the modal (it should never occupy the whole screen)
5. add a darkened/dimmed layer underneath the modal
6. never disrupt the user journey, the modal should be triggered as a result of user interaction with the page, such as a button click.

Implementation

TODO

Examples

https://react-bootstrap.github.io/components/modal/
https://reach.tech/dialog/
https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/dialog.html

https://design.nib.com.au/language/master/#/organism/modal?_k=bezgi3

Accessibility

https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal
https://www.w3.org/TR/wai-aria-1.1/#dialog

Resources

https://uxplanet.org/best-practices-for-modals-overlays-dialog-windows-c00c66cddd8c
https://xd.adobe.com/ideas/process/ui-design/best-practices-for-designing-overlays/
https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal
https://www.w3.org/TR/wai-aria-1.1/#dialog

Visuals

Any relevant visuals that help describe the component.

Additional context

Anything that does not fit into the other categories.

[raunofreiberg]

Hey, thanks so much for the submission! This is a great start.

A few notes:

A modal is a dialog box that is displayed on top of the current page or another dialog box.

I've used the word "overlay" previously. What do you think about something like:

Modal is an overlay displayed on top of the current page.

I think that nested modals aren't very common so it might be unnecessary to specify "or another dialog box"

---

I like the points under best practices! Do you think we could elaborate a bit on some of those points?

For example:

When mentioning clear exit routes, specify what kind of exit routes do we mean? Clicking on the backdrop, a visual close button, and Escape key come to mind at first.

Speaking of descriptive titles, let's add some example use cases and copywriting tips. Something like we have for Notification.

I think we can also take some content from the following resources I've used on Modals:

• https://www.nngroup.com/articles/modal-nonmodal-dialog/
• https://polaris.shopify.com/components/overlays/modal

[raunofreiberg]

If you'd like, feel free to start working on the article locally and throw up a pull request whenever you feel ready. We can iterate from there onwards!

[weigelcinthya]

Hey! thanks for the tips, I`ll work on the article this weekend :D