AlertDialog abstracts Dialog's Dialog.Portal, Dialog.Overlay, and Dialog.Content into a single, opinionated component. It includes a prop for appearance which allows you to customize dialog's status (default, warning, danger, or success) and a prop for size, which allows you to customize the dialog's width (sm, md, lg, or xl).

Import

import { AlertDialog } from "@fuegokit/react/experimental";

Appearance

Default

<Dialog>
  <Dialog.Trigger asChild>
    <AtlasButton>Open default example</AtlasButton>
  </Dialog.Trigger>
  <AlertDialog heading="Alert Dialog Heading" appearance="default" size="md">
    <AlertDialogBody>Dialog description here.</AlertDialogBody>
    <AlertDialogFooter>
      <Dialog.Close asChild>
        <AtlasButton appearance="subtle">Cancel</AtlasButton>

Danger

<Dialog>
  <Dialog.Trigger asChild>
    <AtlasButton>Open danger example</AtlasButton>
  </Dialog.Trigger>
  <AlertDialog heading="Alert Dialog Heading" appearance="danger" size="md">
    <AlertDialogBody>Dialog description here.</AlertDialogBody>
    <AlertDialogFooter>
      <Dialog.Close asChild>
        <AtlasButton appearance="subtle">Cancel</AtlasButton>

Warning

<Dialog>
  <Dialog.Trigger asChild>
    <AtlasButton>Open warning example</AtlasButton>
  </Dialog.Trigger>
  <AlertDialog heading="Alert Dialog Heading" appearance="warning" size="md">
    <AlertDialogBody>Dialog description here.</AlertDialogBody>
    <AlertDialogFooter>
      <Dialog.Close asChild>
        <AtlasButton appearance="subtle">Cancel</AtlasButton>

Success

<Dialog>
  <Dialog.Trigger asChild>
    <AtlasButton>Open success example</AtlasButton>
  </Dialog.Trigger>
  <AlertDialog heading="Alert Dialog Heading" appearance="success" size="md">
    <AlertDialogBody>Dialog description here.</AlertDialogBody>
    <AlertDialogFooter>
      <Dialog.Close asChild>
        <AtlasButton appearance="subtle">Cancel</AtlasButton>

Props

AlertDialog

AlertDialog abstracts Dialog.Portal, Dialog.Overlay, and Dialog.Content into a single, opinionated component.

Name	Type	Default	Description
appearance	'default' \| 'warning' \| 'danger' \| 'success'	default	Dialog status and appearance of buttons in the footer
size	'sm' \| 'md' \| 'lg' \| 'xl'	md	Width of the dialog
heading	string	-	Heading at the top of the dialog
children	React.ReactNode	-	Children to render in the dialog

AlertDialogBody

The body of the dialog.

Name	Type	Default	Description
children	React.ReactNode	-	-

AlertDialogFooter

Actions to render at the bottom of the dialog.

Name	Type	Default	Description
children	React.ReactNode	-	-