Skip to main content



Modals are used to display content to users that needs immediate attention or is critical to their current user flow. When a modal is open, users are unable to interact with the on-page content behind the modal and cannot return to the previous workflow until the user completes the requirement or dismisses the modal.

When to Use

  • There is a need for an immediate response from the user.
  • Notify the user of urgent information concerning their current work.
  • Confirm a user decision.

When not to use

  • Avoid using a modal when the task should be repeatedly done by the user.
  • Do not use modals for non-essential information that’s not related to the current workflow.


The main component has these props:

  • title - title for the modal or custom header element
  • className
  • contentClassName - specific class for the content of the modal
  • closeOnEscape
  • closeOnBackdropClick
  • trapFocus - whether to restore focus back to the element that was focused when the focus scope mounted, after the focus scope unmounts.
  • isOpen
  • onDismiss
  • onClickBackdrop - if not set will call onDismiss if that is set

ModalTabsHeader - custom header element with tabs that has the following props:

  • icon
  • title
  • tabs
  • activeTab
  • onChangeTab

Types and Behaviors

  1. Basic Modal: the basic modal with the default header, main content, close buttons and/or action buttons.

  2. Modal using the contentClassName prop: in this case the modal content has applied a specific class.

  3. Modal with tabs: in this ocassion, the modal has tabs, each of one with its main content and buttons.


Dialog (Modal) Pattern Please check the keyboard's behaviour when building a modal. We have noticed that when the content is overflowing, the user cannot scroll it unless:

  • The modal contains interactive elements, such as buttons, on the bottom.
  • The content has tabIndex = 0, and therefore, it can be keyboard-focusable.

Storybook Library