Alert

Componente de alerta tipo banner para mensajes importantes

Componente de alerta tipo banner construido con Tailwind CSS y class-variance-authority. Úsalo para avisos importantes, errores o advertencias.

¡Atención!

Puedes usar este componente para resaltar información importante.

import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert";

export default function Example() {
  return (
    <Alert>
      <AlertTitle>¡Atención!</AlertTitle>
      <AlertDescription>
        Puedes usar este componente para resaltar información importante.
      </AlertDescription>
    </Alert>
  );
}

View Code

Instalación

bash

liminal add alert

Uso

¡Atención!

Puedes usar este componente para resaltar información importante.

import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert";

export default function Example() {
  return (
    <Alert>
      <AlertTitle>¡Atención!</AlertTitle>
      <AlertDescription>
        Puedes usar este componente para resaltar información importante.
      </AlertDescription>
    </Alert>
  );
}

View Code

Ejemplos

Variantes

Alerta por defecto

Esta es una alerta neutra que usa los colores de tu tema.

Error

Algo salió mal. Por favor, inténtalo de nuevo.

<Alert variant="default">
  <AlertTitle>Alerta por defecto</AlertTitle>
  <AlertDescription>Alerta neutra con los colores de tu tema.</AlertDescription>
</Alert>
<Alert variant="destructive">
  <AlertTitle>Error</AlertTitle>
  <AlertDescription>Algo salió mal. Por favor, inténtalo de nuevo.</AlertDescription>
</Alert>

View Code

API

Prop	Type	Default	Description
variant	"default" \| "destructive"	"default"	Estilo visual. Usa destructive para errores o mensajes críticos.