AlertDialog

An AlertDialog is a modal dialog that interrupts the user’s workflow to communicate important information and require a response.

function Example() {
  const [open, setOpen] = React.useState(false);

  return (
    <>
      <Button onClick={() => setOpen(true)}>Open Dialog</Button>
      <AlertDialog
        open={open}
        onClose={() => setOpen(false)}
        title="Stilt Sandpiper"
        body="Totam triduana aggero eos adsum. Id numquam incidunt defendo adsidue amplexus convoco turpis clamo conforto. Cubitum caelum cura."
      />
    </>
  );

}

Prerequisites

To use the AlertDialog component, you must first install the @codedazur/react-dictionary package and wrap your application in a DictionaryProvider. The AlertDialog component uses the continue key from the dictionary to translate the “Continue” button text.


import { DictionaryProvider } from "@codedazur/react-dictionary";
 
export default function App() {
  return (
    <DictionaryProvider
      dictionaries={{
        en_US: {
          continue: "Continue",
        },
      }}
    >
      {children}
    </DictionaryProvider>
  );
}

Note

Please refer to the React Dictionary integration guide for more information.

Features

Persistent Dialog

By default, an AlertDialog can be closed by clicking on the backdrop. You can prevent this by setting the persistent prop to true. The user must then explicitly click the confirmation button to close the dialog.

function Example() {
  const [open, setOpen] = React.useState(false);

  return (
    <>
      <Button onClick={() => setOpen(true)}>Open Persistent Dialog</Button>
      <AlertDialog
        open={open}
        onClose={() => setOpen(false)}
        title="Northern Harrier"
        body="Amplus viduo usque thesis demens curto distinctio sulum supra argumentum. Tristis quibusdam arto quasi nesciunt vesica trans voluptatibus sulum animi. Chirographum spectaculum censura congregatio rem patrocinor antea."
        persistent
      />
    </>
  );

}

Anatomy

The AlertDialog is composed of a Dialog component that contains an Info component to structure its content. Below is a visual representation of the AlertDialog’s structure, rendered inline for clarity.

Eastern Phoebe

Reiciendis ventus textor sed cupiditate cur impedit. Laboriosam cohors comitatus sortitus iure beatae tabula uterque. Decretum triduana amet vicissitudo.

1.DialogThe main dialog container, shown here as a Surface.

2.TitleThe title of the alert dialog.

3.BodyThe body content of the alert dialog.

4.ActionsThe area containing the action buttons.

Reference

Props

The AlertDialog component inherits props from the Dialog component (except for title) and adds the following:

Name	Type	Default	Description
`title`	`InfoProps['headline']`	-	The title of the dialog.
`body`	`InfoProps['body']`	-	The body content of the dialog.
`persistent`	`boolean`	`false`	If `true`, the dialog cannot be closed by clicking the backdrop.

Events

Name	Description
`onClose`	Callback fired when the dialog requests to be closed.

Tokens

Key	Default Value
`alertDialog.surface.base.paddingLeft`	`var(--gpqiqdd)`
`alertDialog.surface.base.paddingTop`	`var(--gpqiqdd)`
`alertDialog.surface.base.paddingRight`	`var(--gpqiqdd)`
`alertDialog.surface.base.paddingBottom`	`var(--gpqiqdd)`