Alert Dialog

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

@react.component
let make = () =>
  <AlertDialog>

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.

@react.component
let make = () =>
  <AlertDialog>

Small

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

@react.component
let make = () =>
  <AlertDialog>

Media

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

@react.component
let make = () =>
  <AlertDialog>

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.

@react.component
let make = () =>
  <AlertDialog>

Destructive

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

@react.component
let make = () =>
  <AlertDialog>

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.