# Alert: Inserted after load

> Alerts that mount after the page has loaded fade and slide in, and screen readers announce them. Alerts already in the server HTML appear without motion.

Example: https://hextaui.com/docs/alert/examples/inserted
Component docs: https://hextaui.com/docs/alert.md

## Add this example

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

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

## Source

```tsx title="components/examples/alert/inserted.tsx"
"use client"

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

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

export function AlertInserted() {
  const [errors, setErrors] = React.useState<number[]>([])

  return (
    <div className="flex w-full max-w-lg flex-col gap-3">
      <Button
        variant="outline"
        size="sm"
        className="self-start"
        onClick={() => setErrors([...errors, Date.now()])}
      >
        Submit form
      </Button>
      {errors.map((id) => (
        <Alert
          key={id}
          variant="destructive"
          onOpenChange={() =>
            setErrors((current) => current.filter((error) => error !== id))
          }
        >
          <IconCircleX />
          <AlertTitle>Email is already in use</AlertTitle>
          <AlertDescription>Try signing in instead.</AlertDescription>
          <AlertClose />
        </Alert>
      ))}
    </div>
  )
}
```

## 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. |
| `onOpenChange` | `(open: boolean) => void` | – | Called when the close button is pressed. |

## 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)
- [Cancel a dismiss](https://hextaui.com/docs/alert/examples/cancel-dismiss.md)
- [Rich content](https://hextaui.com/docs/alert/examples/rich-content.md)
- [Right to left](https://hextaui.com/docs/alert/examples/rtl.md)