Dismissible Alerts

Alerts with a close button so users can clear a notice once read. Use for cookie banners, promotions, and warnings that should not stay forever.

import { useState } from 'react';
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
import { Button } from '@/components/ui/button';
import {
  AlertCircle,
  AlertTriangle,
  CheckCircle,
  X,
  XCircle,
} from 'lucide-react';

export default function DismissibleAlerts() {
  const [alerts, setAlerts] = useState({
    default: true,
    destructive: true,
    success: true,
    warning: true,
    info: true,
  });

  const closeAlert = (type: keyof typeof alerts) => {
    setAlerts((prev) => ({ ...prev, [type]: false }));
  };

  const resetAlerts = () => {
    setAlerts({
      default: true,
      destructive: true,
      success: true,
      warning: true,
      info: true,
    });
  };

  return (
    <div className="p-6">
      <div className="flex flex-col gap-4">
        {alerts.default && (
          <Alert className="relative shadow-sm">
            <AlertTitle>Default Alert</AlertTitle>
            <AlertDescription>
              This is a dismissible default alert.
            </AlertDescription>
            <Button
              variant="ghost"
              size="icon"
              className="absolute top-2 right-2 h-6 w-6"
              onClick={() => closeAlert('default')}
            >
              <X className="h-4 w-4" />
            </Button>
          </Alert>
        )}

        {alerts.destructive && (
          <Alert variant="destructive" className="relative shadow-sm">
            <XCircle className="h-4 w-4" />
            <AlertTitle>Destructive Alert</AlertTitle>
            <AlertDescription>
              This is a dismissible destructive alert.
            </AlertDescription>
            <Button
              variant="ghost"
              size="icon"
              className="text-destructive hover:bg-destructive/10 absolute top-2 right-2 h-6 w-6 !p-0"
              onClick={() => closeAlert('destructive')}
            >
              <X className="h-4 w-4" />
            </Button>
          </Alert>
        )}

        {alerts.success && (
          <Alert className="relative border-green-500/50 text-green-700 shadow-sm dark:border-green-500 dark:text-green-400 [&>svg]:text-green-500">
            <CheckCircle className="h-4 w-4" />
            <AlertTitle>Success Alert</AlertTitle>
            <AlertDescription>
              This is a dismissible success alert.
            </AlertDescription>
            <Button
              variant="ghost"
              size="icon"
              className="absolute top-2 right-2 h-6 w-6 !p-0 text-green-700 hover:bg-green-500/10 dark:text-green-400"
              onClick={() => closeAlert('success')}
            >
              <X className="h-4 w-4" />
            </Button>
          </Alert>
        )}

        {alerts.warning && (
          <Alert className="relative border-yellow-500/50 text-yellow-700 shadow-sm dark:border-yellow-500 dark:text-yellow-400 [&>svg]:text-yellow-500">
            <AlertTriangle className="h-4 w-4" />
            <AlertTitle>Warning Alert</AlertTitle>
            <AlertDescription>
              This is a dismissible warning alert.
            </AlertDescription>
            <Button
              variant="ghost"
              size="icon"
              className="absolute top-2 right-2 h-6 w-6 !p-0 text-yellow-700 hover:bg-yellow-500/10 dark:text-yellow-400"
              onClick={() => closeAlert('warning')}
            >
              <X className="h-4 w-4" />
            </Button>
          </Alert>
        )}

        {alerts.info && (
          <Alert className="relative border-blue-500/50 text-blue-700 shadow-sm dark:border-blue-500 dark:text-blue-400 [&>svg]:text-blue-500">
            <AlertCircle className="h-4 w-4" />
            <AlertTitle>Info Alert</AlertTitle>
            <AlertDescription>
              This is a dismissible info alert.
            </AlertDescription>
            <Button
              variant="ghost"
              size="icon"
              className="absolute top-2 right-2 h-6 w-6 !p-0 text-blue-700 hover:bg-blue-500/10 dark:text-blue-400"
              onClick={() => closeAlert('info')}
            >
              <X className="h-4 w-4" />
            </Button>
          </Alert>
        )}
      </div>

      {!Object.values(alerts).every(Boolean) && (
        <Button
          className="mt-6 shadow-md transition-shadow hover:shadow-lg"
          onClick={resetAlerts}
        >
          Reset Alerts
        </Button>
      )}
    </div>
  );
}

About this block

Dismissible Alerts is a stacked set of five notices, each carrying a title, a short description, and an X button anchored to the top right corner. The five variants are default, destructive, success, warning, and info. Each has a matching icon and color treatment so the tone is clear at a glance. When a user closes an alert it disappears from the stack, and a Reset Alerts button appears below so all five can be restored in one click.

Every alert is independent. You can keep only the variants your product needs, swap the titles and descriptions freely, and remove the reset button entirely for a production build where dismissed notices stay gone.

When to use

Reach for this block when notices should clear out of the way once a user has acknowledged them. It suits a real estate marketplace well: a success alert confirming a saved search, a warning that a listing price recently dropped, and an info alert about a new open house can each be dismissed as the user works through their dashboard without the page filling up with stale notices.

A natural flow around it on a Components page:

Before

Basic Alerts to show the same tone set in a static form before adding dismiss behavior
Badges to label the status categories your alerts will cover

After

Cards to house richer content once a user acts on a notice
Compact Alerts for follow-up messages in tight spaces after the primary notice clears

What you can customize

Five ready-to-use tonal variants with close buttons that cover the most common notice scenarios. A few ways to adapt the set:

Variant selection. Keep only the variants your flows require and drop the rest so the stack stays focused.
Copy and icons. Each alert title and description is independent, so you can tailor the message to the exact event without touching the other cards.
Reset behavior. The reset button is shown only when at least one alert has been closed, making it useful in demos or settings pages where users should be able to undo a dismiss.

Tip: in production, wire each close handler to persist the dismissed state so the notice stays gone on page reload rather than reappearing every visit.

About this block

When to use

A natural flow around it on a Components page:

Before

Basic Alerts to show the same tone set in a static form before adding dismiss behavior
Badges to label the status categories your alerts will cover

After

Cards to house richer content once a user acts on a notice
Compact Alerts for follow-up messages in tight spaces after the primary notice clears

What you can customize

Five ready-to-use tonal variants with close buttons that cover the most common notice scenarios. A few ways to adapt the set:

Variant selection. Keep only the variants your flows require and drop the rest so the stack stays focused.
Copy and icons. Each alert title and description is independent, so you can tailor the message to the exact event without touching the other cards.
Reset behavior. The reset button is shown only when at least one alert has been closed, making it useful in demos or settings pages where users should be able to undo a dismiss.

Tip: in production, wire each close handler to persist the dismissed state so the notice stays gone on page reload rather than reappearing every visit.

Dismissible Alerts

About this block

When to use

What you can customize

Search Shadcn UI Blocks

About this block

When to use

What you can customize