Skip to content
All Taste components

Feedback

Alert

An inline message about the page: information, success, a warning or an error.

info · success · warning · error

Your trial ends in 3 daysAdd a payment method to keep your projects.
Payment receivedInvoice INV-1042 is marked as paid.
import { cva, type VariantProps } from "class-variance-authority";
import { AlertTriangle, CheckCircle2, Info } from "lucide-react";

const alert = cva("flex items-start gap-2.5 rounded px-3.5 py-3 text-[13.5px]", {
  variants: {
    tone: {
      info: "bg-info-soft text-info-fg",
      success: "bg-success-soft text-success-fg",
      warning: "bg-warning-soft text-warning-fg",
      danger: "bg-danger-soft text-danger-fg",
    },
  },
  defaultVariants: { tone: "info" },
});

const icons = { info: Info, success: CheckCircle2, warning: AlertTriangle, danger: AlertTriangle };

export function Alert({ tone = "info", title, children }:
  VariantProps<typeof alert> & { title: string; children?: React.ReactNode }) {
  const Icon = icons[tone ?? "info"];
  return (
    <div role={tone === "danger" ? "alert" : "status"} className={alert({ tone })}>
      <Icon className="mt-px size-[18px] shrink-0" aria-hidden />
      <div><p className="font-medium">{title}</p>{children}</div>
    </div>
  );
}

The code uses the Taste Tailwind preset. Make yours on the Taste page with Export my system.