# 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.

Example: https://hextaui.com/docs/alert/examples/cancel-dismiss
Component docs: https://hextaui.com/docs/alert.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/alert-cancel-dismiss.json
```

This adds `components/examples/alert/cancel-dismiss.tsx` with the Alert component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/alert/cancel-dismiss.tsx"
"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>
  )
}
```

## Props in this example

### Alert

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

### AlertClose

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

## More Alert examples

- [Variants](https://hextaui.com/docs/alert/examples/variants.md)
- [Soft](https://hextaui.com/docs/alert/examples/soft.md)
- [Partial content](https://hextaui.com/docs/alert/examples/partial-content.md)
- [Actions](https://hextaui.com/docs/alert/examples/actions.md)
- [Dismissible](https://hextaui.com/docs/alert/examples/dismissible.md)
- [Controlled](https://hextaui.com/docs/alert/examples/controlled.md)
- [Inserted after load](https://hextaui.com/docs/alert/examples/inserted.md)
- [Rich content](https://hextaui.com/docs/alert/examples/rich-content.md)
- [Right to left](https://hextaui.com/docs/alert/examples/rtl.md)