Alert Dialog

A modal pop-up designed to capture user attention for important actions or messages. It consists of three main components, which are Header, Content, and Footer. These elements together form a flexible and cohesive dialog structure that can accommodate different types of alerts or forms.

Source Storybook

Usage

Import

import {
  AlertDialog,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogTitle,
  AlertDialogTrigger,
  AlertDialogAction,
  AlertDialogClose,
} from "@govtechmy/myds-react/alert-dialog";

Anatomy

export default () => (
  <AlertDialog>
    <AlertDialogTrigger />
    <AlertDialogBody>
      <AlertDialogHeader>
        <AlertDialogTitle />
      </AlertDialogHeader>
      <AlertDialogContent>
        <AlertDialogDescription />
      </AlertDialogContent>
      <AlertDialogFooter>
        <AlertDialogClose />
      </AlertDialogFooter>
    </AlertDialogBody>
  </AlertDialog>
);

Examples

Variant

Use the variant prop to set the theme of the alert dialog. The default variant is default. The available variants are info, success, warning, and danger.

Trigger

Use the AlertDialogTrigger to wrap the trigger element that opens the dialog. The example below shows three different (3) buttons opening the same alert dialog.

Uncontrolled vs Controlled State

To use the alert dialog in an uncontrolled state, set the defaultOpen prop to the initial state of the dialog.

To use the alert dialog in the controlled state, utilize the open and onOpenChange prop to handle the state programmatically.

Uncontrolled

Controlled

Dismissible

To prevent users from dismissing the dialog, set the dismissible prop to false at AlertDialogContent. By default, the dialog is dismissible.

You can attach a callback function to the onDismiss prop to handle the dismiss event.

Alignment

You can set align to DialogAction to align the children to the start, end, or full width of the dialog. By default, the alignment is set to end.

Start

Full

End

Prop	Type	Default
`variant`	`enum`	`success`
`open`	`boolean`	`false`
`defaultOpen`	`boolean`	`false`
`onOpenChange`	`(open: boolean) => void`	-

AlertDialogContent

Prop	Type	Default
`dismissible`	`boolean`	`true`
`onDismiss`	`() => void`	-

AlertDialogAction

Prop	Type	Default
`align`	`start \| end \| full`	`end`
`action`	`ReactNode`	-

MYDS