# Alert

- Page: <https://kznlabs.github.io/labsUI/components/alert>

## Alert (`alert`, component)

Server-safe inline banner: tinted surface, colored icon, title, description and an optional action. Info, success, warning and destructive tones follow the accent and status tokens.

- Install: `npx @kznlabs/labsui add alert`
- Docs: <https://kznlabs.github.io/labsUI/components/alert>
- Brings: utils
- npm: clsx@^2.1.1, lucide-react@1.63.0, tailwind-merge@^3.7.0

### API

- `<Alert>` (+ <div> props): Inline banner: tinted surface, colored icon, title and description. No live-region role by
default (a static banner should not be announced on load); add `role="alert"` when it appears
in response to something the user did.
  - `action?: ReactNode`: Right-aligned slot, e.g. a small Button.
  - `icon?: ReactNode`: Replaces the variant's icon; pass `null` for none.
  - `variant?: "default" | "info" | "success" | "warning" | "destructive"` = `"default"`: Tone: sets the tint and the default icon.
- `<AlertTitle>` (+ <p> props)
- `<AlertDescription>` (+ <div> props)

### Usage

```tsx
<Alert variant="warning" action={<Button size="sm" variant="outline">Renew</Button>}><AlertTitle>Token expires soon</AlertTitle><AlertDescription>Renew it to keep syncing.</AlertDescription></Alert>
```

### Example: token-warning.tsx

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

export function TokenWarning() {
  return (
    <Alert variant="warning" action={<Button size="sm" variant="outline">Renew</Button>}>
      <AlertTitle>Token expires in 2 days</AlertTitle>
      <AlertDescription>Renew it to keep the dashboard in sync.</AlertDescription>
    </Alert>
  );
}
```