Alert Dialog

Related components

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

Wrap your trigger component in an AlertProvider, then with useAlert trigger the dialog by calling showAlert

AlertDialog exports a number of components that can be composed together to create a modal pop up that expects a response from the user.

By setting the properties on showAlert, the components

AlertDialog also exports a custom hook useAlert, that can be used to dynamically render an alert based on some content and a callback. showAlert accepts a theme and size prop which can be used to customise the AlertDialog.

Using showAlert

const MyComponent = () =>{
  const { showAlert } = useAlert()

  const handleClick = () => {
    showAlert({
      id: 'my-alert',
      theme: 'warning',
      size: 'md',
      title: 'Are you sure you want to delete this school?',
      description: 'This will remove all restrictions from your school',
      confirmActionText: 'Delete school',
      cancelActionText: 'No',
      onAction: (result) => {
        if (result) console.log('Confirmation')
      }
    })
  }

  return <Button onClick={handleClick}>Delete school</Button>
}
const App = () => (
  <AlertProvider>
    <MyComponent />
  </AlertProvider>
)
render(<App />)

Custom confirm and cancel buttons

It is recommended to use the confirmActionTextand cancelActionTextoptions to use the default consistent styling. However, if needed you can opt for the custom button elements using the confirmElement and cancelElement options:

const MyComponent = () =>{
  const { showAlert } = useAlert()

  const handleClick = () => {
    showAlert({
      id: 'my-alert',
      theme: 'danger',
      size: 'lg',
      title: 'Delete student',
      description: 'You are going to delete this student. Are you sure?',
      confirmElement: (
        <Button theme="danger" size="sm" onClick={() => console.log("Delete user")}>
          Yes, delete them please
        </Button>
      ),
      cancelElement: (
        <Button appearance="outline" size="sm" onClick={() => console.log("Don't delete user")}>
          Nah, don't do that
        </Button>
      )
    })
  }

  return <Button onClick={handleClick}>Delete student</Button>
}

const App = () => (
  <AlertProvider>
    <MyComponent />
  </AlertProvider>
)
render(<App />)

Alternatively you can compose the dialog to customise it further

<AlertDialog>
  <AlertDialog.Trigger asChild>
    <Button>
      <Icon is={ArrowLeft} className="size-4 md:size-6" />
    </Button>
  </AlertDialog.Trigger>
  <AlertDialog.Content>
    <Heading as={AlertDialog.Title} size="sm" className="mb-8">
      Custom Alert dialog
    </Heading>
    <div className="flex flex-col gap-8">
      <Text as={AlertDialog.Description}>
        You can either write content like this, with a Text component displayed as an AlertDialog.Description component.</Text>
       <AlertDialog.Description asChild>
       <Text>Or with the AlertDialog.Description component using the asChild property.</Text>
       </AlertDialog.Description>
      <div className="flex flex-row gap-8">
        <AlertDialog.Cancel appearance="outline" asChild>
          <Button>Cancel</Button>
        </AlertDialog.Cancel>
        <AlertDialog.Action asChild>
          <Button>Confirm</Button>
        </AlertDialog.Action>
      </div>
    </div>
  </AlertDialog.Content>
</AlertDialog>

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.