componentes / alert

Alert

Mensaje en línea con título, descripción, icono, acción opcional y botón de cerrar.

Cómo usar

Úsalo para feedback ligado a un lugar de la página, como validación de formularios o estado de una integración. `warning` y `danger` se anuncian de forma asertiva (`role="alert"`), los demás de forma cortés. El botón de cerrar solo aparece con `onDismiss`. Para avisos temporales usa `Toast`, para los de toda la página `Banner`.

preview

Guardado

Tus cambios se guardaron.

Cambios sin guardar

Tienes ediciones pendientes.

Alert.tsx

import { Alert, Button } from "vaiperui";
 
<Alert variantColor="success" title="Guardado">
  Tus cambios se guardaron.
</Alert>
<Alert
  variantColor="warning"
  title="Cambios sin guardar"
  action={<Button size="sm" variant="transparent">Guardar ahora</Button>}
  onDismiss={() => setOpen(false)}
>
  ...
</Alert>

Colores

preview

primary

success

warning

danger

colores.tsx

<Alert variantColor="primary">primary</Alert>
<Alert variantColor="success">success</Alert>
<Alert variantColor="warning">warning</Alert>
<Alert variantColor="danger">danger</Alert>

Tamaños

preview

tamanos.tsx

<Alert size="sm">sm</Alert>
<Alert size="md">md</Alert>
<Alert size="lg">lg</Alert>

Color personalizado

preview

Violeta

color-personalizado.tsx

<Alert customColor="#8b5cf6">Violeta</Alert>

Props

Prop	Valores	Predeterminado	Descripción
variantColor	primary \| success \| warning \| danger	primary	Color e icono por defecto. warning y danger usan role=alert, los demás role=status
customColor	string \| { light, dark }	ninguno	Cualquier color CSS (o un par por tema). Reemplaza a variantColor
size	sm \| md \| lg	md	Espaciado y tamaño del texto
radius	none \| sm \| md \| lg \| full	lg	Redondeo de las esquinas
title	ReactNode	ninguno	Resumen en negrita sobre la descripción (los children)
icon	ReactNode \| false	icono de estado	Tu propio icono, o false para ocultarlo
action	ReactNode	ninguno	Espacio para una acción, como un Button pequeño transparente o un enlace
onDismiss	() => void	ninguno	Muestra el botón de cerrar y se ejecuta al hacer clic; tú decides si desmontar
dismissLabel	string	Dismiss	Nombre accesible del botón de cerrar
(nativas)	HTMLAttributes<HTMLDivElement>	ninguno	role (reemplaza el predeterminado), className, style, aria-*, ref, etc.

Accesibilidad

`warning` y `danger` usan `role="alert"` (asertivo); `primary` y `success` usan `role="status"` (cortés).
Pasa `role` para sobrescribir el valor por defecto, por ejemplo `role="status"` en una alerta `danger` que no debe interrumpir.
El icono de estado por defecto es `aria-hidden`; es decoración y no aporta significado a los lectores de pantalla.
El botón de cerrar es un `<button>` real con `aria-label` tomado de `dismissLabel` (por defecto "Dismiss") y anillo de foco visible.
El slot `action` renderiza tu propio elemento, así que mantenlo enfocable (botón o enlace) con una etiqueta clara.

Ten en cuenta

Traduce `dismissLabel` tú mismo; el valor por defecto está en inglés.
No dependas solo del color: incluye siempre un `title` o texto que diga el significado.
Cerrar no mueve el foco; si el foco estaba dentro de la alerta, llévalo a un lugar adecuado en `onDismiss`.