Alert

The Alert component is a compound component for displaying contextual status messages. It automatically renders a matching icon for each variant and supports optional action buttons and dismiss behavior.

Import

import { Alert } from "@tailor-platform/app-shell";

Basic Usage

function BasicUsage() {
  return (
    <Alert.Root variant="success">
      <Alert.Title>Saved</Alert.Title>
      <Alert.Description>Your changes have been saved.</Alert.Description>
    </Alert.Root>
  );
}

Sub-components

Sub-component	Description
Alert.Root	Container with variant styling and automatic icon
Alert.Title	Bold title line of the alert
Alert.Description	Additional descriptive text below the title

Props

Generated from the type surface — first-party props only.

AlertProps

Prop	Type	Default	Description
action?	React.ReactNode	-	Action element rendered below the description
dismissible?	boolean	-	Shows a dismiss button; hides the alert when clicked
onDismiss?	() => void	-	Callback invoked when the dismiss button is clicked
variant?	"error" | "neutral" | "success" | "warning" | "info" | null	"neutral"	Visual style and automatic icon

Exports

• Alert — const
• AlertProps — type
• alertVariants — const

All standard HTML <div> props are also accepted.

Variants

Each variant automatically renders a contextual icon:

<Alert.Root variant="neutral">
  <Alert.Title>Note</Alert.Title>
  <Alert.Description>General information.</Alert.Description>
</Alert.Root>

<Alert.Root variant="success">
  <Alert.Title>Success</Alert.Title>
  <Alert.Description>Operation completed successfully.</Alert.Description>
</Alert.Root>

<Alert.Root variant="warning">
  <Alert.Title>Warning</Alert.Title>
  <Alert.Description>Proceed with caution.</Alert.Description>
</Alert.Root>

<Alert.Root variant="error">
  <Alert.Title>Error</Alert.Title>
  <Alert.Description>Something went wrong.</Alert.Description>
</Alert.Root>

<Alert.Root variant="info">
  <Alert.Title>Info</Alert.Title>
  <Alert.Description>Here is some useful information.</Alert.Description>
</Alert.Root>

Variant	Automatic Icon	Color palette
neutral	Message circle icon	Muted surface
success	Check circle icon	Green
warning	Alert triangle icon	Yellow
error	X circle icon	Red/destructive
info	Info icon	Blue

With Action Button

Use the action prop to render an action element below the description:

<Alert.Root
  variant="warning"
  action={
    <Button size="sm" variant="outline">
      Review
    </Button>
  }
>
  <Alert.Title>Review Required</Alert.Title>
  <Alert.Description>This record has pending changes that need review.</Alert.Description>
</Alert.Root>

Dismissible Alert

Set dismissible to show a close button. Use onDismiss to react when the alert is dismissed:

<Alert.Root variant="info" dismissible onDismiss={() => markAlertRead(alertId)}>
  <Alert.Title>New Feature Available</Alert.Title>
  <Alert.Description>Check out the new dashboard layout in Settings.</Alert.Description>
</Alert.Root>

Note: When dismissible is true, clicking the close button hides the alert via internal state. The onDismiss callback fires after the alert is hidden.

Examples

Form Validation Error

function OrderForm() {
  const [error, setError] = useState<string | null>(null);

  return (
    <form>
      {error && (
        <Alert.Root variant="error" dismissible onDismiss={() => setError(null)}>
          <Alert.Title>Submission Failed</Alert.Title>
          <Alert.Description>{error}</Alert.Description>
        </Alert.Root>
      )}
      {/* form fields */}
    </form>
  );
}

Success Confirmation

<Alert.Root variant="success">
  <Alert.Title>Invoice Created</Alert.Title>
  <Alert.Description>Invoice #INV-0042 has been sent to the customer.</Alert.Description>
</Alert.Root>

Warning with Action

<Alert.Root
  variant="warning"
  action={
    <Button size="sm" variant="outline" onClick={() => navigate("/settings/billing")}>
      Update Billing
    </Button>
  }
>
  <Alert.Title>Payment Method Expiring</Alert.Title>
  <Alert.Description>Your credit card on file expires at the end of this month.</Alert.Description>
</Alert.Root>

Accessibility

• The root element has role="alert" so screen readers announce the message.
• The dismiss button has aria-label="Dismiss".
• Variant icons are marked aria-hidden and are decorative only — the text content carries the meaning.

Styling

Alerts are styled with the library's internal astw:-prefixed utilities. Write plain Tailwind utilities in your own markup, and reach for variant rather than restyling what Alert sets itself — see Styling AppShell components. Customize appearance using:

1. Using className on Alert.Root for additional styles
2. Using alertVariants utility to apply variant classes to custom elements

import { alertVariants } from "@tailor-platform/app-shell";
import { cn } from "@/lib/utils";

<div className={cn(alertVariants({ variant: "info" }), "my-4")}>Custom alert container</div>;

Related Components

• Badge - Inline status labels
• Button - Use as action element inside alerts