Modal

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. Modals Design Guidelines.

Edit the code below to see your changes live!

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

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

      <Modal isOpen={isOpen} onClose={() => setIsOpen(false)} closeOnEscKey={true} closeOnClickOutside={false}>
        <Modal.Header>Modal Title</Modal.Header>

        <Modal.Body>
          <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>
          <Text>
            Esse ipsum est consectetur nulla aute deserunt. Anim sint nisi consequat officia adipisicing irure.
            Nulla ea reprehenderit elit eu nostrud sunt veniam dolore ex occaecat qui. Commodo ullamco ut sint
            dolor quis cillum in et enim culpa esse exercitation ad. Eiusmod adipisicing nisi culpa esse laborum
            cupidatat ad pariatur proident. Consectetur ex sint ullamco non ex.
          </Text>
        </Modal.Body>

        <Modal.Actions>
          <Button variant="subtle" onClick={() => setIsOpen(false)}>
            Cancel
          </Button>
          <Button onClick={() => setIsOpen(false)}>Apply</Button>
        </Modal.Actions>
      </Modal>
    </>
  );
}

function Example() {
  const [isOpen, setIsOpen] = React.useState(false);
  return (
    <>
      <Button onClick={() => setIsOpen(true)}>Open Modal</Button>
      <Modal isOpen={isOpen} onClose={() => setIsOpen(false)} closeOnEscKey={true} closeOnClickOutside={false}>
        <Modal.Header>Modal Title</Modal.Header>
        <Modal.Body>
          <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>
          <Text>
            Esse ipsum est consectetur nulla aute deserunt. Anim sint nisi consequat officia adipisicing irure.
            Nulla ea reprehenderit elit eu nostrud sunt veniam dolore ex occaecat qui. Commodo ullamco ut sint
            dolor quis cillum in et enim culpa esse exercitation ad. Eiusmod adipisicing nisi culpa esse laborum
            cupidatat ad pariatur proident. Consectetur ex sint ullamco non ex.
          </Text>
        </Modal.Body>
        <Modal.Actions>
          <Button variant="subtle" onClick={() => setIsOpen(false)}>
            Cancel
          </Button>
          <Button onClick={() => setIsOpen(false)}>Apply</Button>
        </Modal.Actions>
      </Modal>
    </>
  );
}

Dialog

Setting the variant prop to dialog results in a simplified version of a Modal. The purpose of a dialog is to act as a safety net for a user attempting a destructive action. Modals–Confirmation Design Guidelines.

Edit the code below to see your changes live!

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

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

      <Modal
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        closeOnEscKey={true}
        closeOnClickOutside={false}
        variant="dialog"
      >
        <Modal.Header>Dialog Title</Modal.Header>

        <Modal.Body>
          <Text>
            Ea tempor sunt amet labore proident dolor proident commodo in exercitation ea nulla sunt pariatur.
          </Text>
        </Modal.Body>

        <Modal.Actions>
          <Button variant="subtle" onClick={() => setIsOpen(false)}>
            Cancel
          </Button>
          <Button onClick={() => setIsOpen(false)}>Apply</Button>
        </Modal.Actions>
      </Modal>
    </>
  );
}

function Example() {
  const [isOpen, setIsOpen] = React.useState(false);
  return (
    <>
      <Button onClick={() => setIsOpen(true)}>Open Dialog</Button>
      <Modal
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        closeOnEscKey={true}
        closeOnClickOutside={false}
        variant="dialog"
      >
        <Modal.Header>Dialog Title</Modal.Header>
        <Modal.Body>
          <Text>
            Ea tempor sunt amet labore proident dolor proident commodo in exercitation ea nulla sunt pariatur.
          </Text>
        </Modal.Body>
        <Modal.Actions>
          <Button variant="subtle" onClick={() => setIsOpen(false)}>
            Cancel
          </Button>
          <Button onClick={() => setIsOpen(false)}>Apply</Button>
        </Modal.Actions>
      </Modal>
    </>
  );
}

API

Modal

Prop Name	Type	Default	Description
`isOpen` *	`boolean`		Determines if the modal/dialog is open.
`onClose` *	`() => void`		Function that will be called on close events.
`backdrop`	`boolean`	`true`	Determines if the backdrop is shown.
`closeOnClickOutside`	`boolean`	`false`	Controls whether `onClose` is called when clicking outside of the modal.
`closeOnEscKey`	`boolean`	`true`	Controls whether `onClose` is called when pressing the ESC key.
`variant`	`modal` \| `dialog`	`modal`	Determines the modal variant.
Props ending with * are required

Modal.Header

Prop Name	Type	Default	Description
`withBorder`	`boolean`	`false`	Determines if the header bottom border is shown.
Props ending with * are required

Modal.Actions

Prop Name	Type	Default	Description
`withBorder`	`boolean`	`false`	Determines if the actions top border is shown.
Props ending with * are required

Beta

Introduction

Foundations

Layout

Actions & Inputs

Status & Feedback

Utilities

Modal

Dialog

API

Modal

Modal.Header

Modal.Actions