104Get started
HextaUI

Alert: Controlled

Pass open and onOpenChange to drive it from your own state. It animates both in and out.

Deployment complete
Your changes are live on production.

Content below slides up.

"use client"

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

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

export function AlertControlled() {
  const [open, setOpen] = React.useState(true)

  return (
    <div className="flex w-full max-w-lg flex-col gap-3">
      <Button
        variant="outline"
        size="sm"
        className="self-start"
        onClick={() => setOpen(!open)}
      >
        {open ? "Hide" : "Show"} alert
      </Button>
      <Alert variant="success" open={open} onOpenChange={setOpen}>
        <IconCircleCheck />
        <AlertTitle>Deployment complete</AlertTitle>
        <AlertDescription>
          Your changes are live on production.
        </AlertDescription>
        <AlertClose />
      </Alert>
      <p className="text-sm text-muted-foreground">Content below slides up.</p>
    </div>
  )
}

Add this example

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

pnpm dlx shadcn@latest add https://hextaui.com/r/alert-controlled.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"
open
boolean–
onOpenChangeCalled when the close button is pressed.
(open: boolean) => 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.

Related components