Components
Loading preview...
A styled alert component with variant support (default, info, success, warning, error) and optional action buttons.
npx shadcn@latest add https://21st.dev/r/coss.com/alertimport {
Alert,
AlertAction,
AlertDescription,
AlertTitle,
} from "@/components/ui/alert";
import { Terminal } from "lucide-react";
export default function AlertWithActionButtons() {
return (
<div className="flex items-center justify-center w-full min-h-screen bg-background p-8">
<div className="w-full max-w-xl">
<Alert className="flex flex-col gap-3 p-4">
{/* Top row: icon + text */}
<div className="flex items-start gap-3">
<Terminal className="size-4 mt-0.5 shrink-0" />
<div className="space-y-1 min-w-0">
<AlertTitle className="leading-none">Heads up!</AlertTitle>
<AlertDescription>
You can add components to your app using the CLI.
</AlertDescription>
</div>
</div>
{/* Bottom row: buttons always on their own line, aligned under text */}
<AlertAction className="flex flex-wrap gap-2 pl-7">
<button className="inline-flex items-center justify-center rounded-lg border bg-background px-3 py-1.5 text-xs font-medium shadow-sm hover:bg-muted transition-colors">
Undo
</button>
<button className="inline-flex items-center justify-center rounded-lg border border-transparent bg-foreground text-background px-3 py-1.5 text-xs font-medium shadow-sm hover:opacity-90 transition-opacity">
Action
</button>
</AlertAction>
</Alert>
</div>
</div>
);
}