FeedbackAvailable
Alert
Inline feedback with a title, description, and semantic intent.
Installation
Add the component and its dependencies from the registry running on your computer.
terminal
npx shadcn@latest add https://brutallab.facilito.dev/r/alert.jsonUsage
Import the component into your project and keep the source code under your control.
tsx
'use client';
import { Alert, AlertTitle, AlertDescription } from '@/components/ui/alert';
export default function Demo() {
return (
<div className="grid w-full max-w-lg gap-5">
<Alert>
<AlertTitle>Changes saved</AlertTitle>
<AlertDescription>Your workspace is ready to use.</AlertDescription>
</Alert>
<Alert variant="destructive">
<AlertTitle>Unable to save</AlertTitle>
<AlertDescription>Check the connection and try again.</AlertDescription>
</Alert>
</div>
);
}
States & interaction
Appearance, behavior and keyboard checks.
- Distinguish loading, progress, success, error and empty data as appropriate. Keep messages understandable without color.
- The indicator needs no hover. Only actions and dismiss controls receive focus. Respect reduced motion.
API Reference
BrutalLab-specific properties. Native attributes are supported as well.
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | default / destructive | default | Selects the feedback treatment. |
Accessibility
Rules that should remain intact when adapting the component to a product.
Reserve role=alert for urgent changes. Pair the status color with a descriptive title.
Retain keyboard focus styles and test the composition with keyboard navigation.
Use className for visual customization; preserve the primitive ARIA attributes.