Quick Links

Alert Dialog

Displays a confirmation modal window above the page contents.

 <AlertDialog.Root>
  <AlertDialog.Trigger>
    <Button>Open</Button>
  </AlertDialog.Trigger>
  <AlertDialog.Content maxWidth="500px">
    <AlertDialog.Header
      title="Revoke setup link"
      description="The setup link will no longer be accessible and any existing setup sessions will be revoked."
    />

    <AlertDialog.Footer>
      <AlertDialog.Cancel>
        <Button>Cancel</Button>
      </AlertDialog.Cancel>
      <AlertDialog.Action>
        <Button color="red">Revoke link</Button>
      </AlertDialog.Action>
    </AlertDialog.Footer>
  </AlertDialog.Content>
</AlertDialog.Root>

API Reference

This component inherits parts and props from the Radix Alert Dialog primitive and is visually identical to Dialog, though with differing semantics and behavior. View source

Root

Contains all the parts of an alert dialog.

Trigger

Wraps the control that will open the alert dialog.

Content

Contains content to be rendered in the open alert dialog. This component is based on the div element.

Prop	Type	Default
`title`	`React.ReactNode`	required
`description`	`React.ReactNode`
`error`	`React.ReactNode`
`children`	`React.ReactNode`	`null`

Body

Contains the main content of the dialog.

Contains the actions of the dialog.

Title Deprecated

The Title component is deprecated and it should be used only on very specific cases. Use the title prop instead.

An accessible title that is announced when the alert dialog is opened. This part is based on the Heading component with a pre-defined font size and leading trim on top.

Description Deprecated

The Description component is deprecated and it should be used only on very specific cases. Use the description prop instead.

An optional accessible description that is announced when the dialog is opened. This part is based on the Text component with a pre-defined font size.

If you want to remove the description entirely, remove this part and pass aria-describedby={undefined} to AlertDialog.Content.

Action

Wraps the control that will close the dialog. This should be distinguished visually from the Cancel control.

Cancel

Wraps the control that will close the dialog. This should be distinguished visually from the Action control.

Examples

With Inset

Use the Inset component to create a container that ignores the Content part padding. If needed, you can recreate the original padding by setting the Inset part’s padding props to "current".

 <AlertDialog.Root>
  <AlertDialog.Trigger>
    <Button>Open</Button>
  </AlertDialog.Trigger>
  <AlertDialog.Content maxWidth="500px">
    <AlertDialog.Header
      title="Log out of all devices"
      description="Are you sure you want to log out this user from all devices?"
    />

    <Dialog.Body>
      <Inset side="x" py="current">
        <Table.Content>
          <Table.Header>
            <Table.Row>
              <Table.ColumnHeader>Device</Table.ColumnHeader>
              <Table.ColumnHeader>Location</Table.ColumnHeader>
            </Table.Row>
          </Table.Header>
          <Table.Body>
            <Table.Row>
              <Table.RowHeader>iPhone Xs</Table.RowHeader>
              <Table.Cell>Sant Cugat del Vallès, Spain</Table.Cell>
            </Table.Row>
            <Table.Row>
              <Table.RowHeader>MacBook Pro 15″</Table.RowHeader>
              <Table.Cell>Sant Cugat del Vallès, Spain</Table.Cell>
            </Table.Row>
          </Table.Body>
        </Table.Content>
      </Inset>
    </Dialog.Body>

    <Dialog.Footer>
      <AlertDialog.Cancel>
        <Button>Cancel</Button>
      </AlertDialog.Cancel>
      <AlertDialog.Action>
        <Button color="red">Log out</Button>
      </AlertDialog.Action>
    </Dialog.Footer>
  </AlertDialog.Content>
</AlertDialog.Root>

With an error callout

 <AlertDialog.Root>
  <AlertDialog.Trigger>
    <Button>Open</Button>
  </AlertDialog.Trigger>
  <AlertDialog.Content maxWidth="500px">
    <AlertDialog.Header
      title="Revoke setup link"
      description="The setup link will no longer be accessible and any existing setup sessions will be revoked."
      error="Something went wrong. Try again later."
    />

    <AlertDialog.Footer>
      <AlertDialog.Cancel>
        <Button>Cancel</Button>
      </AlertDialog.Cancel>
      <AlertDialog.Action>
        <Button color="red">Revoke link</Button>
      </AlertDialog.Action>
    </AlertDialog.Footer>
  </AlertDialog.Content>
</AlertDialog.Root>

With custom callout

 <AlertDialog.Root>
  <AlertDialog.Trigger>
    <Button>Open</Button>
  </AlertDialog.Trigger>
  <AlertDialog.Content maxWidth="500px">
    <AlertDialog.Header
      title="Revoke setup link"
      description="The setup link will no longer be accessible and any existing setup sessions will be revoked."
    >
      <Callout.Root color="gray">
        <Callout.Text>This action is irreversible.</Callout.Text>
      </Callout.Root>
    </AlertDialog.Header>

    <AlertDialog.Footer>
      <AlertDialog.Cancel>
        <Button>Cancel</Button>
      </AlertDialog.Cancel>
      <AlertDialog.Action>
        <Button color="red">Revoke link</Button>
      </AlertDialog.Action>
    </AlertDialog.Footer>
  </AlertDialog.Content>
</AlertDialog.Root>