FeedbackDisponible
Alert
Avisos con título, descripción e intención semántica.
Instalación
Agrega el componente y sus dependencias desde el registro que está ejecutándose en tu computadora.
terminal
npx shadcn@latest add https://brutallab.facilito.dev/r/alert.jsonUso
Importa el componente en tu proyecto y conserva el código bajo tu 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>
);
}
Estados e interacción
Aspecto, comportamiento y comprobación con teclado.
- Distingue carga, progreso, éxito, error y ausencia de datos según el componente. Mantén el mensaje comprensible sin color.
- El indicador no necesita hover. Solo sus acciones o controles de cierre reciben foco. Respeta la preferencia de movimiento reducido.
Referencia API
Propiedades propias de BrutalLab. También acepta los atributos nativos correspondientes.
| Prop | Tipo | Default | Descripción |
|---|---|---|---|
| variant | default / destructive | default | Selects the feedback treatment. |
Accesibilidad
Reglas que deben conservarse cuando el componente se adapte a un producto.
Conserva las etiquetas visibles y el HTML semántico del ejemplo.
Mantén el foco visible y comprueba la composición mediante el teclado.
Personaliza el aspecto con className sin reemplazar los atributos ARIA de la primitiva.