Modal Component

Modal dialogs, or pop-up windows, are handy for prototyping and production.

Basics

A modal is just an empty container, so you can put any kind of content inside it, from text to forms to video to an entire grid.

The default markup in order to generate a modal will look like the following:

<modal label="Open my modal">
    You can put any Markup in here ...
</modal>

or you add your own way in order to open the modal:

<button class="button success" data-open="custom-modal">Open Custom</button>
<modal id="custom-modal">Custom Modal</modal>

You'll also need a way to close the modal from inside. By default, modals will close if clicked outside of, or if the esc key is pressed. However, you'll generally also want to add your own click trigger. Add the attribute data-close to any element within the modal to add one.

You can use our handy close button styles to do this:

<button class="close-button" data-close aria-label="Close modal" type="button">
  <span aria-hidden="true">&times;</span>
</button>

or you set the closable="true" attribute:

<modal label="Closable Modal" closable="true">
    You can put any Markup in here ...
</modal>

Sizing

On small screens, a modal is always 100% of the width of the screen. On medium-sized screens and larger, the width changes to 80%.

The size of a modal can be changed using the size="" attribute, which are added to the modal container:

• size="tiny": 30% wide
• size="small": 50% wide
• size="large": 90% wide
• size="full": 100% width and height, defaults the escClose option to true, as well as creates a close button.

<modal label="Tiny Modal" size="tiny">
  Tiny Modal
</modal>

No Overlay

To remove the overlay, add the attribute overlay="false" to the modal.

<modal label="Remove Overlay" overlay="false">
  No overlay for modals
</modal>

Animations

To use animations from the Motion UI library, include the animation="someAnimationIn" attribute:

<modal label="Spin-In Modal" animation="spin">
    This modal is totally spinning
</modal>

Accessibility

Modals by default are accessible through the use of various ARIA attributes. To make a modal even more accessible, designate a label to the modal by adding labelledby="exampleModalHeader1" to the container and id="exampleModalHeader1" to the elment you want to designate as the label.

<modal label="Accessibility" labelledby="exampleModalHeader1">
    <h1 id="exampleModalHeader1">Accessibility Modal Example</h1> 
</modal>