Alert Dialog

A modal dialog that interrupts the user with important content and expects a response.

Installation#

npmyarnpnpmbun
npx shadcn@latest add @rescript-shadcn/AlertDialog
Copy

Usage#

Copy<AlertDialog>
  <AlertDialog.Trigger render={<Button variant=Outline />}>
    {"Show Dialog"->React.string}
  </AlertDialog.Trigger>
  <AlertDialog.Content>
    <AlertDialog.Header>
      <AlertDialog.Title> {"Are you absolutely sure?"->React.string} </AlertDialog.Title>
      <AlertDialog.Description>
        {"This action cannot be undone."->React.string}
      </AlertDialog.Description>
    </AlertDialog.Header>
    <AlertDialog.Footer>
      <AlertDialog.Cancel> {"Cancel"->React.string} </AlertDialog.Cancel>
      <AlertDialog.Action> {"Continue"->React.string} </AlertDialog.Action>
    </AlertDialog.Footer>
  </AlertDialog.Content>
</AlertDialog>

Examples#

Basic#

A basic alert dialog with a title, description, and cancel and continue buttons.

Small#

Use the size=Sm prop to make the alert dialog smaller.

Media#

Use the AlertDialog.Media component to add a media element such as an icon or image to the alert dialog.

Small with Media#

Use the size=Sm prop to make the alert dialog smaller and the AlertDialog.Media component to add a media element such as an icon or image to the alert dialog.

Destructive#

Use the AlertDialog.Action component to add a destructive action button to the alert dialog.

API Reference#

size#

Use the size props on the AlertDialog.Content component to control the size of the alert dialog. It accepts the following values:

For more information about the other components and their props, see the Base UI documentation.