Todos los componentes (204)

Aviso global

Superficies · GlobalAlert · .amset-banner

Qué es y cuándo usarlo

La cinta de ancho completo de arriba de la página: una parada por mantenimiento, una prueba a punto de caducar, una incidencia. Habla de la aplicación entera, no de lo que se está rellenando.

Cuándo usarlo

Avisos que valen para cualquier pantalla: una parada programada, un servicio de fuera caído, el final del periodo de prueba.
variant="solid" para una caída o un bloqueo que no puede pasar desapercibido; soft (por defecto) para el resto.
size: sm para una cinta que acompaña sin estorbar (el entorno de pruebas), lg para una caída.
action para un botón o un enlace a la derecha («Renovar», «Ver detalles»). En ventanas de menos de 40rem baja a su propia línea y la equis se queda arriba, en su esquina.
fixed la deja pegada arriba al desplazar (position: sticky), para mantenimiento o caídas.
centered centra el texto cuando la cinta es corta y ocupa toda la pantalla.
onClose cuando se puede descartar. La cinta no se quita sola: la quita quien la pinta, al recibir la llamada.

Cuándo no

Lo que toca al formulario o a la tarjeta que se está viendo: Alert.
La red caída: ConnectionStatus, que ya escucha al navegador.
El consentimiento de cookies: CookieBanner.

Teclado: la cinta no es enfocable. El botón de cerrar (con onClose) y lo que vaya en action tienen su propia parada de Tab; Intro y Espacio pulsan el de cerrar.

Accesibilidad: con tone="error" es role="alert" e interrumpe; el resto, role="status", espera turno, porque una cinta informativa no tiene por qué cortar lo que se está leyendo. announcement lo fuerza (alert, status o none). El icono es decorativo (aria-hidden) y cada tono tiene su silueta: triángulo el aviso, octógono el error; icon lo cambia y withoutIcon lo quita. La equis se ve de 24 a 32 px y se pulsa en 44 × 44 con el dedo; se llama «Cerrar el aviso» y closeLabel lo cambia.

Aspecto fino: variables CSS --amset-banner-*: -padding-block, -padding-line, -slot, -font, -icon y -close; los colores del tono, en --amset-banner-tone, -tone-soft, -tone-solid y -tone-ink. fixed es sticky arriba, en la capa --amset-layer-sticky.

Cómo se ve

<GlobalAlert tone="warning">
  El mantenimiento del sabado dejara la tienda sin pedidos de 02:00 a 04:00.
</GlobalAlert>

Props

Se importa con import { GlobalAlert } from '@amset/ui'. Las obligatorias van marcadas.

Prop	Tipo	Para qué sirve
`children`obligatoria	`ReactNode`	—
`action`	`ReactNode`	Un boton o un enlace a la derecha: "Renovar", "Ver detalles".
`announcement`	`AlertAnnouncement`	Fuerza como se anuncia. Por defecto un error interrumpe y el resto espera turno.
`centered`	`boolean`	Centra el texto cuando la cinta es corta y ocupa toda la pantalla.
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`closeLabel`	`string`	—
`fixed`	`boolean`	Se queda pegada arriba al desplazar. Para mantenimiento o caidas.
`icon`	`ReactNode`	Icono propio en lugar del que toca por tono.
`onClose`	`() => void`	—
`size`	`"sm" \| "md" \| "lg"`	`sm` para una cinta que acompaña (entorno de pruebas); `lg` para una caida.
`tone`	`"neutral" \| "accent" \| "secondary" \| "tertiary" \| "info" \| "success" \| "warning" \| "error"`	Que quiere decir. Por defecto, `info`.
`variant`	`GlobalAlertVariant`	—
`withoutIcon`	`boolean`	Sin icono: para cintas puramente informativas.

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

Mandos

Estas variables CSS son la forma de adaptarlo. Se declaran sobre el selector del componente, no en :root: la hoja las redeclara en la propia regla y una declaración en el mismo elemento gana siempre.

Variable	Por defecto
`--amset-banner-tone`	`var(--amset-info)`
`--amset-banner-tone-soft`	`var(--amset-info-soft)`
`--amset-banner-tone-solid`	`var(--amset-info-solid)`
`--amset-banner-tone-ink`	`var(--amset-info-ink)`
`--amset-banner-padding-block`	`var(--amset-space-3)`
`--amset-banner-padding-line`	`var(--amset-space-4)`
`--amset-banner-slot`	`var(--amset-space-3)`
`--amset-banner-font`	`var(--amset-text-base)`
`--amset-banner-icon`	`1.125rem`
`--amset-banner-close`	`1.75rem`
`--amset-banner-background`	`var(--amset-banner-tone-soft)`
`--amset-banner-border`	`color-mix(in oklab, var(--amset-banner-tone) 30%, transparent)`
`--amset-banner-text`	`var(--amset-banner-tone)`

Cómo se cambia

.amset-banner {
  --amset-banner-tone: ...;
  --amset-banner-tone-soft: ...;
}

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: