Alert
Inline callout with default, destructive, success and warning variants.
Preview
Design tokens extracted
Your layout.md bundle is ready. Copy it into your project or install via the CLI.
Installation
bash
npx shadcn@latest add @layout/alertUsage
tsx
import {
Alert,
AlertTitle,
AlertDescription,
} from "@/components/ui/alert"Examples
Success
Published
Your layout.md bundle has been pushed to the repository and is live for all team members.
Warning
Deprecation notice
The
--layout-shadow-* tokens will be renamed in v2. Update your references before upgrading.Destructive
Extraction failed
Could not reach the Figma file. Check your access token and file permissions, then try again.
Guidelines for AI agents
Static inline messaging scoped to a page section. Lead with a lucide icon sized size-4. For transient feedback use a toast instead.
Never
- Neverstack more than two alerts in a row; consolidate the message
- Neveruse destructive alerts for warnings; warning exists for that
Tokens consumed
--layout-surface--layout-border--layout-danger--layout-success--layout-warning--layout-radius