> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getsabo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Alert

> Inline feedback for success, warning, and error.

<Frame>
  <img src="https://mintcdn.com/aristotechnologiesinc/AI-6KNJJN4jkkZTo/images/ui/alert-light.png?fit=max&auto=format&n=AI-6KNJJN4jkkZTo&q=85&s=34ddcad7763f73acac390fcd66d1823e" alt="Alert component preview (light)" width="400" data-path="images/ui/alert-light.png" />
</Frame>

* **Location**: `sabo/src/components/ui/alert.tsx`

## When to use

* Display inline status inside a page (success message, non-blocking warning, error summary).
* Prefer Dialog for blocking confirmations and Toast for transient notifications.

## Usage

```tsx sabo/src/components/ui/alert.tsx theme={null}
import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert";
import { CircleAlertIcon, CheckCircleIcon } from "lucide-react";

export function Example() {
  return (
    <div className="space-y-3">
      <Alert>
        <CheckCircleIcon />
        <AlertTitle>Saved</AlertTitle>
        <AlertDescription>Your changes were saved successfully.</AlertDescription>
      </Alert>

      <Alert variant="destructive">
        <CircleAlertIcon />
        <AlertTitle>Failed to save</AlertTitle>
        <AlertDescription>Check your connection and try again.</AlertDescription>
      </Alert>
    </div>
  );
}
```

## Key props

<ParamField path="variant" type="string" default="default">
  <code>default</code> | <code>destructive</code> — toggles error styling.
</ParamField>

## Styling tip

* Place an icon as the first child to enable the compact two‑column layout.
* Keep titles short; put details in <code>AlertDescription</code>.

## Accessibility

* Uses <code>role="alert"</code>. Ensure plain text content is readable by screen readers.