OverviewIntroductionIntroductionUsageUsageThemeThemeLayoutBoxBoxContainerContainerFlexFlex GridGridSectionSectionTypographyTextText HeadingHeadingComponentsAccordionAccordionAlert DialogAlert DialogAvatarAvatarBadgeBadgeBlockquoteBlockquoteButtonButton CalloutCallout CardCard CheckboxCheckbox ChipChip Code BlockCode Block Code EditorCode Editor Color FieldColor Field Data ListData ListDefinition ListDefinition ListDialogDialogHover CardHover CardIcon ButtonIcon Button InsetInset Image FieldImage Field LabelLabel MarkerMarkerPermanent LinkPermanent LinkPopoverPopoverProgressProgressRadio Card GroupRadio Card GroupScreenshotScreenshotScroll AreaScroll AreaSegmented ControlSegmented ControlSelectSelectSeparatorSeparator SkeletonSkeleton SpinnerSpinner StatusStatus SwitchSwitch TableTableTabsTabsText AreaText Area Text FieldText FieldTooltipTooltipZoomableZoomableFormattingCodeCodeEmEmKbdKbdQuoteQuoteStrongStrongIconsLogo IconLogo IconFeature IconFeature IconProvider IconProvider IconIcon PanelIcon PanelNavigationPage NavPage NavQuick NavQuick NavUtilitiesDesign System ProviderDesign System ProviderRecipesCopy ButtonCopy Button Copy ChipCopy Chip Theme ToggleTheme Toggle

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.Title>Revoke setup link</AlertDialog.Title>
    <AlertDialog.Description>
      The setup link will no longer be accessible and any existing setup
      sessions will be revoked.
    </AlertDialog.Description>

    <Flex gap="3" justify="end" mt="5">
      <AlertDialog.Cancel>
        <Button>Cancel</Button>
      </AlertDialog.Cancel>
      <AlertDialog.Action>
        <Button color="red">Revoke link</Button>
      </AlertDialog.Action>
    </Flex>
  </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.

Title

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

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.Title>Log out of all devices</AlertDialog.Title>
    <AlertDialog.Description mb="4">
      Are you sure you want to log out this user from all devices?
    </AlertDialog.Description>

    <Inset side="x">
      <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>

    <Flex gap="3" justify="end" mt="5">
      <AlertDialog.Cancel>
        <Button>Cancel</Button>
      </AlertDialog.Cancel>
      <AlertDialog.Action>
        <Button color="red">Log out</Button>
      </AlertDialog.Action>
    </Flex>
  </AlertDialog.Content>
</AlertDialog.Root>