Alert

Mensaje contextual con variantes.

Variantes

Vista previa

Mensaje informativo para el usuario.

Se guardó correctamente.

Algo salió mal, intenta de nuevo.

<Alert variant="destructive">
  <AlertTitle>Error</AlertTitle>
  <AlertDescription>Algo salió mal.</AlertDescription>
</Alert>

El mismo componente bajo distintos modos y marcas. No cambia el componente — solo los tokens (CSS variables) del contenedor.

Claro · base

Mensaje informativo para el usuario.

Se guardó correctamente.

Algo salió mal, intenta de nuevo.

Oscuro · base

Mensaje informativo para el usuario.

Se guardó correctamente.

Algo salió mal, intenta de nuevo.

Claro · emerald

Mensaje informativo para el usuario.

Se guardó correctamente.

Algo salió mal, intenta de nuevo.

Oscuro · violet

Mensaje informativo para el usuario.

Se guardó correctamente.

Algo salió mal, intenta de nuevo.