Alert: Cancel a dismiss

Call event.preventDefault() in the close button’s onClick to keep the alert open, for example to ask for confirmation first.

Unsaved changes

The first click is cancelled with event.preventDefault().

"use client"

import * as React from "react"
import { IconAlertTriangle } from "@tabler/icons-react"

import {
  Alert,
  AlertClose,
  AlertDescription,
  AlertTitle,
} from "@/components/ui/alert"

export function AlertCancelDismiss() {
  const [confirmed, setConfirmed] = React.useState(false)

  return (
    <Alert variant="warning" className="max-w-lg">
      <IconAlertTriangle />
      <AlertTitle>Unsaved changes</AlertTitle>
      <AlertDescription>
        {confirmed
          ? "Click dismiss again to close."
          : "The first click is cancelled with event.preventDefault()."}
      </AlertDescription>
      <AlertClose
        onClick={(event) => {
          if (!confirmed) {
            event.preventDefault()
            setConfirmed(true)
          }
        }}
      />
    </Alert>
  )
}

Add this example

This adds the example as components/examples/alert/cancel-dismiss.tsx, together with the Alert component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/alert-cancel-dismiss.json

To add only the component, follow the Alert installation.

Props in this example

The Alert props this example sets, from the API reference.

Alert

Prop	Type	Default
`variant`Colors the icon. destructive and warning are announced assertively.	`"default" \| "destructive" \| "success" \| "info" \| "warning"`	`"default"`

AlertClose

Prop	Type	Default
`onClick`Call event.preventDefault() to keep the alert open.	`(event: MouseEvent) => void`	`–`

Every prop is in the Alert API reference.

More Alert examples

See them all, with keyboard support and accessibility notes, on the Alert page.