Modal

Overview

Modals sit on top of the page, containing additional content or functionality without leaving the context of a page.

When to use:

  • To focus on a particular on an specific task or content.
  • To confirm high impact actions (e.g. deleting a configuration).

Implementation

A Modal appears as a layer on top of the primary interface. Modals disrupt users from interacting with the page until they complete a specific task.

Edit the code below to see your changes live!

function Example() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <Button onClick={() => setIsOpen(true)}>Open Modal</Button>

      <Modal
        actions={[
          {
            text: 'Cancel',
            variant: 'subtle',
            onClick: () => setIsOpen(false),
          },
          { text: 'Apply', onClick: () => setIsOpen(false) },
        ]}
        closeOnClickOutside={false}
        closeOnEscKey={true}
        header="Modal title"
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
      >
        <Text>
          Ea tempor sunt amet labore proident dolor proident commodo in
          exercitation ea nulla sunt pariatur. Nulla sunt ipsum do eu
          consectetur exercitation occaecat labore aliqua. Aute elit occaecat
          esse ea fugiat esse. Reprehenderit sunt ea ea mollit commodo tempor
          amet fugiat.
        </Text>
      </Modal>
    </>
  );
}

Props

Prop name
Type
Default
Description
actionsobject[]

Accepts an array of objects with Button props and an additional text prop. See example for usage.

backdropbooleantrue

Determines if the backdrop is shown.

closeOnClickOutsidebooleanfalse

Controls whether onClose is called when clicking outside of the modal.

closeOnEscKeybooleantrue

Controls whether onClose is called when pressing the ESC key.

headerstring

Sets visible text that describes the content of the modal.

isOpenbooleanfalse

Determines if the modal/dialog is open.

onClose() => void

Function that will be called on close events.

variantmodal | dialogmodal

Determines the modal variant.

Props ending with * are required

Do's and Don'ts

Do
Modals should require that users take an action.
Modals should close when users press an action button, not when merchants click or tap the area outside the Modal.
It should be clear why the Modal was opened.
Modals should block other content on a page.
User should have the option to come back without any actions.
Header and content should be left aligned, footer right aligned.
Modals should be positioned in the middle of the screen.
Don't
Modals shouldn’t have more than two buttons (primary and secondary) at the bottom.