'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Avisos
Banner
Una barra de anuncios de todo el sitio sobre el encabezado: lanzamientos, ofertas, mantenimiento.
import { Banner } from '@alea/ui';
Ejemplos
Anuncios
El banner accent para lanzamientos; info y warning para avisos.
Configuraciones
Cada valor de cada propiedad, lado a lado. Los números coinciden con la leyenda.
- Tone
tone
Anatomía
Las partes del componente y la clase que da estilo a cada una.
Tokens
Los tokens de diseño que usa este componente, con su valor en el tema actual. Cambia cualquiera para darle otro estilo.
Color
--alea-accent-on…--alea-border…--alea-gradient-accent-linear…--alea-status-danger-on-solid…--alea-status-danger-solid…--alea-status-info-bg…--alea-status-warning-bg…--alea-text…
Type
--alea-font-size-sm…--alea-font-weight-medium…--alea-font-weight-semibold…
Motion
--alea-motion-duration-slow…--alea-motion-ease-out…
Props
Banner props
Una barra de anuncios de todo el sitio sobre el encabezado: lanzamientos, ofertas, caídas.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
childrenobligatoria | ReactNode | - | El mensaje. Mantenlo en una línea en escritorio. |
action | ReactNode | - | Un enlace o botón después del mensaje. |
aria-label | string | - | Nombre de la región. Por defecto "Anuncio"; dale a cada banner el suyo cuando hay varios. |
className | string | - | |
onDismiss | (() => void) | - | Muestra un botón de cerrar; se llama al cerrarlo. |
tone | "danger" | "accent" | "warning" | "info" | 'accent' | accent (por defecto, degradado), info, warning o danger. |
Especificaciones
Generado desde el código: las variantes de los tipos, los estados y tokens del CSS, y los patrones de motion que aplican. Las grillas muestran el componente real en ambos temas; los números se miden en la página.
- Variantes
tonedangeraccentwarninginfo- Estados
- Hover (CSS)
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-banner.alea-banner-text.alea-banner-action.alea-banner-close- Atributos data
data-tone=accentdata-tone=infodata-tone=warningdata-tone=danger
Accesibilidad
- Una región llamada "Anuncio"; no se anuncia al cargar, así nunca interrumpe.
- El botón de cerrar dice qué cierra.
Teclado
| Tecla | Acción |
|---|---|
| Tab | Llega al enlace y al botón de cerrar |
Qué hacer y qué evitar
Hacer
- Un banner a la vez.
- Deja que se pueda cerrar y recuerda esa elección.
Evitar
- No lo uses para errores en un formulario: usa Alert.