Resonance Design System
☰

Modal Component for creating pop-ups.

The modal component has two parts: an element that opens the modal when it is clicked, and the modal itself. An open modal is, technically, an empty box overlaid over all other page content.

Table of contents

Usage guidelines

When to use
  • Use a modal to confirm actions, especially when those actions are destructive or irreversible in nature. The modal is an opportunity to grab someone's attention and say "are you sure about that?"
  • Use a modal when the action being confirmed is major and/or highly destructive. For instance, the editor uses a modal to confirm deletion of multiple images in a gallery, but does not use a modal to confirm the deletion of a single image in a gallery.
  • Do not use a modal as an extension of the workspace. If you are using a modal to input new information, it should probably be a drawer instead.
How to use
  • Adding the attribute res-modal-open="modal-id" to any element will make it so that the modal with that id is opened when the element is clicked. Conversely, adding res-modal-close="modal-id" to an element will cause it to close the associated modal
  • res-modal requires a single top-level <div> as a wrapper for all other contents of the res-modal in order to properly display.
  • Currently, the positioning of elements inside of modals is up to the consuming app developer.
Content guidelines
  • Use concise, actionable language (e.g., Publish now, Download, Save).
  • Check the story editor and Chorus Video before establishing a new label or verb sequence. For example, sidebars use Close and Update instead of Done, Save, or Dismiss.

Attributes

An asterisk next to a value denotes that it is the default value for that attribute. Unless noted otherwise, attributes should be added to the component element directly. Boolean attributes work based on their presence or absence from the component.

<res-component booleanAttribute stringAttribute="parameter">    
  <child-element></child-element>
</res-component>
AttributeTypeDescription
auto-access-disabledbooleanDisables automatic binding of res-modal-open and res-modal-close attributes. Must be set at initial render.
backgroundstringSet modal background appearance
  • darken
  • lighten
  • transparent
bgclosebooleanAllows the modal to be closed by clicking the background. Replaces the deprecated close-on-bg-click attribute.
openbooleanControls whether the modal is visible or not

API

NameTypeDataDescription
openpropertybooleanGet/set open/visible state

Notes

Supported optional DOM

If added as children, these elements will receive specific styles and/or functionality.

  • <div> - Modal contents wrapped in a single div

History

VersionNote
0.17.0Adds explicit 'darken' value for background attribute and makes it the default.
0.15.3Bug fixes and enhanced binding capabilities.
0.12.0Apply new spacing scale.
0.11.4Design adjustments
0.11.0Tweaks to accommodate new icon set.
0.7.0Web component refactor
0.6.0Modal contents are now automatically parsed.
0.5.0Initial build to spec.