104Get started
HextaUI

Alert: Dismissible

Add <AlertClose /> to let people dismiss it. The alert collapses smoothly and the content below slides up. Dismiss it from the keyboard and focus moves to the next control, here “Reset”.

We’ve updated our terms
Read the new terms before your next billing date.
"use client"

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

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

export function AlertDismissible() {
  const [key, setKey] = React.useState(0)

  return (
    <div className="flex w-full max-w-lg flex-col gap-3">
      <Alert key={key} variant="info">
        <IconInfoCircle />
        <AlertTitle>We’ve updated our terms</AlertTitle>
        <AlertDescription>
          Read the <a href="#">new terms</a> before your next billing date.
        </AlertDescription>
        <AlertClose />
      </Alert>
      <div className="flex gap-2">
        <Button variant="outline" size="sm" onClick={() => setKey(key + 1)}>
          Reset
        </Button>
        <Button variant="outline" size="sm">
          Next focusable
        </Button>
      </div>
    </div>
  )
}

Add this example

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

pnpm dlx shadcn@latest add https://hextaui.com/r/alert-dismissible.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

PropTypeDefault
variantColors the icon. destructive and warning are announced assertively.
"default" | "destructive" | "success" | "info" | "warning""default"

Every prop is in the Alert API reference.

More Alert examples

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

Related components