Alert Dialog
A modal dialog that interrupts the user with important content and expects a response.
Usage
- Examples include action confirmation prompts and error message confirmations.
- Use
AlertDialogTrigger
as a button to turn off AlertDialog - You can also manage the toggle with a boolean state using props
open:boolean | onOpenChange:(FC)
- Use
AlertDialogFooter
to contain your event handling buttons with 2 ComponentsAlertDialogAction
andAlertDialogCancel
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
AlertDialogTrigger,
} from "@momo-webplatform/mobase";
app.js
<AlertDialog>
<AlertDialogTrigger>Open</AlertDialogTrigger>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
<AlertDialogDescription>
This action cannot be undone. This will permanently delete your account
and remove your data from our servers.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogAction>Continue</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
API Reference
Alert Dialog
component extends Radix Alert Dialog (opens in a new tab) component and supports all of its props.
AlertDialog
Prop | Type | Default | Required |
open | enumboolean | -- | false |
defaultOpen | enumboolean | -- | false |
onOpenChange | (open: boolean) => void | -- | false |
AlertDialogTrigger
Prop | Type | Default | Required |
asChild | enumboolean | -- | false |
AlertDialogPortal
Prop | Type | Default | Required |
container | HTMLElement | -- | false |
forceMount | true | -- | false |
AlertDialogOverlay
Prop | Type | Default | Required |
asChild | enumboolean | -- | false |
forceMount | true | -- | false |
AlertDialogContent
Prop | Type | Default | Required |
asChild | enumboolean | -- | false |
forceMount | true | -- | false |
onEscapeKeyDown | (event: KeyboardEvent) => void | -- | false |
onFocusOutside | (event: FocusOutsideEvent) => void | -- | false |
onOpenAutoFocus | (event: Event) => void | -- | false |
onCloseAutoFocus | (event: Event) => void | -- | false |
AlertDialogAction
Prop | Type | Default | Required |
asChild | enumboolean | -- | false |
AlertDialogCancel
Prop | Type | Default | Required |
asChild | enumboolean | -- | false |
AlertDialogTitle
Prop | Type | Default | Required |
asChild | enumboolean | -- | false |
AlertDialogDescription
Prop | Type | Default | Required |
asChild | enumboolean | -- | false |
AlertDialogFooter
Prop | Type | Default | Required |
AlertDialogHeader
Prop | Type | Default | Required |