componentes / banner

Banner

Mensaje de página completa, con acción opcional y botón de cerrar.

Cómo usar

Ocupa el ancho de su contenedor sin redondeo, así que colócalo arriba de la página. Úsalo para ventanas de mantenimiento, anuncios y avisos de prueba. Mismos roles de estado que `Alert`.

preview

Mantenimiento programado hoy a las 22 h.

Banner.tsx

import { Banner, Button } from "vaiperui";
 
<Banner
  action={<Button size="sm" variant="transparent">Saber más</Button>}
  onDismiss={() => setOpen(false)}
>
  Mantenimiento programado hoy a las 22 h.
</Banner>

Colores

preview

primary

success

warning

danger

colores.tsx

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

Tamaños

preview

tamanos.tsx

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

Color personalizado

preview

Violeta

color-personalizado.tsx

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

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
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

Mismos roles que `Alert`: `role="alert"` para `warning` y `danger`, `role="status"` para `primary` y `success`; `role` se puede sobrescribir.
El banner es un `div` simple, no un landmark; no recibe `role="banner"`.
El icono de estado es `aria-hidden`.
El botón de cerrar es un `<button>` real con `aria-label` tomado de `dismissLabel` (por defecto "Dismiss").
El slot `action` renderiza tu propio elemento; mantenlo como un botón o enlace enfocable.

Ten en cuenta

Traduce `dismissLabel`; el valor por defecto está en inglés.
No dependas solo del color; el texto del mensaje debe decir qué pasó.
Cerrar no gestiona el foco, y un banner mostrado al cargar puede no ser anunciado por todos los lectores de pantalla.