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

AlertDialog exports a number of components that can be composed together to create a modal pop up that expects a response from the user. AlertDialog also exports a custom hook that can be used to dynamically render an alert based on some content and a callback; you can see an example of this below.

import { AlertProvider, Button, useAlert } from '@atom-learning/components'
const Component = () => {
const { showAlert } = useAlert()
const handleClick = () => {
showAlert({
title: 'Are you sure you want to delete this school?',
description: 'This will remove all restrictions from your school',
confirmActionText: 'Delete school',
cancelActionText: 'Cancel',
onAction: (result) => {
if (result) console.log('Confirmation')
}
})
}
return <Button onClick={handleClick}>Delete school</Button>
}
const App = () => (
<AlertProvider>
<Component />
</AlertProvider>
)

Accessibility

Consider pairing the onAction function with a method that can announce a message to the user. In the above example a message of "School has been deleted" would be appropriate for screen reader users. Radix UI Announce would be a good candidate for this.

API Reference

AlertDialog

PropTypeDefaultRequired
open
boolean

-

-

defaultOpen
boolean

-

-

onOpenChange
(open: boolean) => void

-

-

cssCSSProperties

-

-

AlertDialog.Content

PropTypeDefaultRequired
asChild
boolean

-

-

onEscapeKeyDown
(event: KeyboardEvent) => void

-

-

onFocusOutside
(event: FocusOutsideEvent) => void

-

-

onOpenAutoFocus
(event: Event) => void

-

-

onCloseAutoFocus
(event: Event) => void

-

-

forceMount
true

-

-

size
"sm" | "md" | "lg"
sm

-

cssCSSProperties

-

-