Alert Dialog

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.