Modal

A design structure to organize and hide content, so as not to overwhelm the user.

Modals provide an opportunity to display content, focused actions or alerts while maintaining the context of an existing view. This limits workflow interruptions and allows for focused communication and user interactions. There are two types of modals in Base – default and alert. Each modal share the same anatomy of a header, footer, and shaded background overlay.

Standard modals are basic containers with a close “X” and the ability the dismiss by clicking outside of the modal bounds. The primary action button is a primary system color, complimented by a grey cancel action.

The alert modal is to intended to focus the user on an urgent message that requires deliberate action. By contrast to standard modals, alert modals have no close “X”, nor do they allow for out of bounds dismissal. The primary action is always a system red with a grey cancel action.

Accessibility

  • Upon opening, focus will be transferred to the dialog itself (unless autofocus is set to false)
  • Dialog element has aria-modal="true"
  • Explicitly exposes a role prop to control whether dialog or alertdialog is used.
  • Tab key moves between focusable items (form inputs, footer buttons, etc). User should not be able to tab to items outside of modal – lucky for us most modern browsers seem to enforce this by default now for role dialog or aria-modal.
  • Escape key closes the modal
  • Click on backdrop (anywhere outside dialog) hides modal.
  • Background is not be scrollable while modal is open (position: fixed).

animate boolean = true

Sets whether the Modal should be displayed by easing in and out

autofocus boolean = true

Set to false if modal shouldn't autofocus on its content. Moving focus into a newly opened modal is important for accessibility purposes. If you set this to false, you should manually trigger focus on another element in the modal.

children union

Modal content. The children-as-function API may be preferable for performance reasons (wont render until opened)

One of
Node,
=> Node

closeable boolean = true

Whether the modal should be closeable by the user (either via escape, backdrop click, etc). You can set this to false if your modal has an action that the user must take before closing.

isOpen boolean = false

mountNode HTMLElement

Where to mount the modal

HTMLElement

onClose function

A callback that is invoked when the modal will close. Callback is passed a constant identifying what triggered the close.

closeSource $Keys{ closeButton: "closeButton", backdrop: "backdrop", escape: "escape" }
=> mixed

overrides object = {}

Root { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>
children Node
$animate boolean required
$isVisible boolean required
$isOpen boolean required
$size required One of
$Keys{ default: "default", full: "full", auto: "auto" },
number,
string
$role required One of
$Keys{ dialog: "dialog", alertdialog: "alertdialog" },
string
$closeable boolean required
$as string
$style nullable Object
$ref
current union required One of
ElementRef"div",
null
Backdrop { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>
children Node
$animate boolean required
$isVisible boolean required
$isOpen boolean required
$size required One of
$Keys{ default: "default", full: "full", auto: "auto" },
number,
string
$role required One of
$Keys{ dialog: "dialog", alertdialog: "alertdialog" },
string
$closeable boolean required
$as string
$style nullable Object
$ref
current union required One of
ElementRef"div",
null
Dialog { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>
children Node
$animate boolean required
$isVisible boolean required
$isOpen boolean required
$size required One of
$Keys{ default: "default", full: "full", auto: "auto" },
number,
string
$role required One of
$Keys{ dialog: "dialog", alertdialog: "alertdialog" },
string
$closeable boolean required
$as string
$style nullable Object
$ref
current union required One of
ElementRef"div",
null
DialogContainer { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>
children Node
$animate boolean required
$isVisible boolean required
$isOpen boolean required
$size required One of
$Keys{ default: "default", full: "full", auto: "auto" },
number,
string
$role required One of
$Keys{ dialog: "dialog", alertdialog: "alertdialog" },
string
$closeable boolean required
$as string
$style nullable Object
$ref
current union required One of
ElementRef"div",
null
Close { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>
children Node
$animate boolean required
$isVisible boolean required
$isOpen boolean required
$size required One of
$Keys{ default: "default", full: "full", auto: "auto" },
number,
string
$role required One of
$Keys{ dialog: "dialog", alertdialog: "alertdialog" },
string
$closeable boolean required
$as string
$style nullable Object
$ref
current union required One of
ElementRef"div",
null

role union =

Which accessibility role this modal should have.

One of
$Keys{ dialog: "dialog", alertdialog: "alertdialog" },
string

size union =

Controls the size of the modal (primarily width). Can be a SIZE constant or css width property value.

One of
$Keys{ default: "default", full: "full", auto: "auto" },
number,
string