Dialogs inform users about a required or critical task.

Dialogs appear over content to provide critical information or ask for a decision. Dialogs disable all other functionality when they appear and remain on screen until an action is taken by the user.

Dialogs must include at least one action button and no more than two.

Dialog with minimal text and one continue action

<State
  initial={{
    show: false,
  }}
>
  {({ state, setState }) => (
    <>
      <Button onClick={() => setState({ show: true })}>
        Open minimal dialog
      </Button>
      <Dialog
        show={state.show}
        title="Minimal dialog here"
        primaryCta={{
          action: () => setState({ show: false }),
          text: "Continue",
        }}
      />
    </>
  )}
</State>

Dialog with some details about the action

<State
  initial={{
    show: false,
  }}
>
  {({ state, setState }) => (
    <>
      <Button onClick={() => setState({ show: true })}>
        Dialog with details
      </Button>
      <Dialog
        detail="This extra informaton is important."
        show={state.show}
        title="Dialog with details"
        primaryCta={{
          action: () => setState({ show: false }),
          text: "Continue",
        }}
      />
    </>
  )}
</State>

Dialog with additional call for action

<State
  initial={{
    show: false,
  }}
>
  {({ state, setState }) => (
    <>
      <Button onClick={() => setState({ show: true })}>
        Dialog with 2 actions
      </Button>
      <Dialog
        detail="This action cannot be undone."
        show={state.show}
        title="Permanently delete this work?"
        primaryCta={{
          action: () => setState({ show: false }),
          text: "Delete",
        }}
        secondaryCta={{
          action: () => setState({ show: false }),
          text: "Cancel",
        }}
      />
    </>
  )}
</State>
On this page
Dialog with minimal text and one continue action
Dialog with some details about the action
Dialog with additional call for action