File should be PDF, DOCX, JPG, or PNG.
If the file type is not one of these we can’t accept your upload.
Installation
$Terminal
npx shadcn@latest add https://sdk-components.thesqd.com/r/alert.jsonUsage
Import from the master file and compose. Pass a `variant` for tone.
TSImport
import { Alert, type AlertVariant } from "@/components/ui/alert";TSExample
import { CircleAlertIcon } from "lucide-react";
import { Alert } from "@/components/ui/alert";
export function Example() {
return (
<Alert
variant="brand"
icon={<CircleAlertIcon />}
title="Heads up"
description="You can add components to your app using the squad-ui CLI."
/>
);
}Composition
Anatomy of the Alert primitive.
Alert (single component — pass everything as props)
├── version="v1 | v2" (v1 soft tint · v2 neutral card + accent bar)
├── variant="default | brand | info | success | warning | destructive"
├── icon={<LucideIcon />} (any lucide icon, optional)
├── title={<ReactNode>} (renders into the title slot)
├── description={<ReactNode>} (multi-line / JSX is fine)
└── action={<Button … />} (optional — top-right slot)Brand
Default soft alert using the brand primary tint.
File should be PDF, DOCX, JPG, or PNG.
If the file type is not one of these we can’t accept your upload.
Info
For neutral, informational context.
Only certain file types are allowed
You can upload PDF, DOCX, JPG, or PNG files up to 20MB.
Success
Confirms a completed action.
File uploaded successfully
Your document has been saved and is now available in your files.
Warning
Highlights a recoverable problem or caution.
This file might be too large
Uploading large files may take longer or fail. Consider compressing it first.
Destructive
Communicates an error or failed operation.
Upload failed
Something went wrong. Please try again or use a different file format.
Report issue (destructive + action)
Destructive alert with a Squad SDK button under the description. Click → button enters loading state with the canonical Spinner pattern → swaps to an info alert confirming support has been notified.
Something went wrong
We hit an unexpected error while processing your request.
Custom action handler
Wire `actionButton.onAction` to a real async handler. Resolve → button moves to `done` and the optional `successMessage` fires as `toast.info`. Throw/reject → button resets to idle so the user can retry.
Couldn't save your changes
The last write was rejected by the server. Retry to apply it.
API Reference
Props exposed by the Alert component.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "brand" | "info" | "success" | "warning" | "destructive" | "default" | Visual tone. Drives border, background, text, and dark-mode classes. |
version | "v1" | "v2" | "v2" | Visual treatment. `v2` (default, latest) is the neutral card with a colored left accent bar + colored icon; `v1` is the older soft full-tint callout. Same flat props and colors either way. |
icon | ReactNode | — | Leading icon (typically a lucide-react icon component). |
title | ReactNode | — | Bold heading rendered next to the icon. |
description | ReactNode | — | Body content. Accepts strings or JSX (e.g. lists of links). |
action | ReactNode | — | Optional content pinned to the top-right corner. |
actionButton | AlertActionConfig | — | Async action button rendered vertically-centered on the right edge. Pass `{ label, loadingLabel?, doneLabel?, successMessage?, variant?, onAction? }`. The alert handles idle → loading (Spinner) → done state and fires the optional info toast on resolve. |
className | string | — | Override or extend the resolved variant classes. |