Alert

Displays a callout for user attention.

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.json

Usage

Import from the master file and compose. Pass a `variant` for tone.

TSImport

import { Alert, type AlertVariant } from "@/components/ui/alert";

TSExample

import { Warning as CircleAlertIcon } from "@phosphor-icons/react/ssr";
import { Alert } from "@/components/ui/alert";

export function Example() {
  return (
    <Alert
      variant="brand"
      icon={<CircleAlertIcon weight="duotone" />}
      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 UI 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 Phosphor 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.