Modal Design

Modals are overlays that temporarily block the main view of the application. They are used for confirming actions, selecting options, managing items, and previewing information.

Default

Open modal

Change the size of the modal

Small Default Large XXL Fullscreen

Props

Centered Scrollable

I'm baby disrupt vinyl direct trade viral heirloom thundercats sriracha etsy fashion axe roof party grailed. DSA green juice cupping echo park umami, knausgaard austin. Health goth art party coloring book, tote bag meh heirloom truffaut farm-to-table tilde. Praxis etsy hoodie yr. Kitsch farm-to-table everyday carry, synth 90's kinfolk green juice ascot chia whatever tumblr vape. Post-ironic gatekeep freegan beard JOMO letterpress, ugh raw denim migas try-hard brunch.

Freegan live-edge raclette kogi intelligentsia. Jean shorts celiac cliche yuccie. PBR&B pickled cupping ramps viral XOXO. Freegan knausgaard meh forage. Ugh umami fingerstache affogato bushwick. Chillwave flexitarian mumblecore keffiyeh freegan praxis, same grailed. Polaroid raclette gluten-free, deep v jawn letterpress hexagon farm-to-table copper mug neutra.

Activated charcoal sus man braid, slow-carb green juice austin you probably haven't heard of them single-origin coffee. Raw denim farm-to-table yuccie echo park health goth chambray, big mood neutra vexillologist kogi kinfolk vice. Cronut man bun solarpunk activated charcoal truffaut, actually occupy franzen whatever big mood sartorial fit. Vexillologist meggings readymade pug. Whatever green juice polaroid XOXO health goth.

Brooklyn forage vaporware wayfarers. Four loko selvage tofu umami paleo meggings cliche. Tofu beard neutra, coloring book meggings art party cronut meditation subway tile church-key umami tote bag messenger bag. Prism sustainable vaporware mixtape fixie gatekeep yr. Solarpunk palo santo ugh roof party keytar. Chambray asymmetrical narwhal bespoke bruh. Normcore tumblr fanny pack organic chartreuse celiac.

Everyday carry readymade blue bottle offal, grailed cred direct trade tonx pitchfork. Trust fund kitsch mumblecore cupping. La croix small batch kitsch, flexitarian bushwick bodega boys cupping four dollar toast. Microdosing PBR&B meditation food truck gastropub everyday carry enamel pin raclette deep v etsy cronut hammock brunch hashtag echo park. Four loko umami helvetica fashion axe af iceland hashtag cornhole tousled big mood ascot.

Close

Toggle dark mode

In Practice

Modals can be incorporated when users are required to make choices or enter information to continue with their current task. They can be helpful in breaking up complex workflows that involve multiple steps.

The three main parts that make up a modal are:

• Header - displays the title and the close icon.
• Body - contains the main content which could be text only or a combination of different interactive elements. The body area is scrollable if the content exceeds the height of the modal.
• Footer - can show actions and links as needed.

Limit footer options

The modal component allows for up to three options in the footer (primary, secondary, tertiary). We advise limiting it to one or two options. A third option may be unavoidable at times, but should be used sparingly.

Avoid multiple modals

Showing more than one modal at a time is overwhelming and confusing for users. If necessary, use a progressive modal in cases where the user can navigate forward and backward through sequential modal content.

Size considerations

The design system includes four modal sizes (S, M, L, XL). Choosing the appropriate size for your design is about balancing the amount of content to enhance readability.

For example, with shorter content, use a small modal to avoid long single lines. With longer content, you’ll want to use a larger modal to reduce scrolling.

Types of modals

Confirmation modal

These modals ask for explicit user confirmation for actions that may have significant consequences. They help prevent accidental changes or data loss. The user must choose an action to proceed.

Information modal

Displays additional information or instructions within a page context. Does not require user action.

Settings modal

Lets the user select or update system settings and other options. Selection/builder modal

Allows the user to select from a list of records to add, remove, or link together in some way. Can include search.

Form modal

Presents a form within a focused workflow, allowing the user to fill out and submit information.

Progressive modal

Made up of multiple, sequential steps that guide the user through a task.

Full-page modal

Used for complex workflows that require larger page real estate and focused engagement.

Accessibility

• Modals should be operable using the keyboard alone.
• Focus should remain and cycle through an open modal until it is dismissed.
  • Aside from the other available actions, modals can be dismissed by pressing the ESC key.
• Follow the accessibility guidelines for each element used in the modal. View guidelines

Design resources

View component in Figma