Core · Avisos y estado
Aviso emergente
Confirma un resultado pequeño, como «Borrador guardado», sin interrumpir la lectura.
Ejemplo
Un aviso emergente que confirma una exportación, mostrado como ejemplo estático.
A static specimen: LUZ draws the toast, and you place it, show it and hide it.
Problemas conocidos
LUZ solo proporciona el aspecto visual. Tú debes crear la región dinámica, la ubicación, el tiempo que se muestra y el comportamiento del botón de cierre, además de garantizar su accesibilidad.
Código
Copiar el marcado
Mantén una región dinámica vacía en la página e introduce en ella el aviso cuando se produzca el resultado.
<div role="status">
<div class="luz-toast">
<div class="luz-toast__content">
<div class="luz-toast__kind">Saved</div>
<div class="luz-toast__msg">Draft saved.</div>
</div>
<button class="luz-toast__close" type="button" aria-label="Dismiss notification">×</button>
</div>
</div>Variantes y opciones
No hay modificadores.
| Clase | Qué hace |
|---|---|
.luz-toast | Una caja elevada sobre la superficie intensa, de hasta 320 px de ancho y nunca más ancha que su contenedor |
.luz-toast | Una etiqueta pequeña en fuente mono encima del mensaje |
.luz-toast | El mensaje |
.luz-toast | El botón ×, de al menos 28 px |
Cómo funciona
Un bloque con estilo de components/toast.css. LUZ no incluye ningún script para avisos emergentes.
- Colócalo con tu propio CSS, por ejemplo, fijado en la parte inferior de la pantalla, por encima de la página con
--luz-z-toast. - Si se oculta automáticamente, déjalo en pantalla al menos 5 segundos y mantenlo mientras tenga el foco o el puntero esté encima.
- Tu script debe eliminar el aviso al pulsar el botón de cierre.
Sin JavaScript
Un aviso emergente solo aparece como respuesta a algo que ha hecho tu script, así que no existe sin JavaScript. Muestra el mismo resultado en la página, por ejemplo, en una alerta después de enviar un formulario.
Teclado y ARIA
Mostrar un aviso emergente no desplaza el foco.
- Insértalo en una región dinámica educada (
role="status") que ya esté en la página, para que lo anuncien los lectores de pantalla. - Se puede llegar al botón de cierre con Tab y su nombre es «Descartar notificación».
Contraste y foco están en la pestaña Diseño.
Diseño
Cuándo usarlo
Usa un aviso emergente para confirmar un resultado pequeño que no requiera respuesta: «Borrador guardado», «Enlace copiado».
Cuándo no usarlo
No uses un aviso emergente para nada que la persona deba atender o no deba perderse: desaparece.
- Para un error, usa una alerta junto a lo que ha fallado.
- Para tomar una decisión, usa un diálogo modal.
- No incluyas enlaces ni botones, salvo el botón de cierre.
Qué hacer y qué no
Cómo escribir el contenido
Una frase breve en pasado: «Archivo exportado».
- La etiqueta del tipo es una palabra: «Guardado», «Correcto».
- No repitas lo que ya muestra la página.
Contraste y foco
El aviso emergente usa la superficie intensa y el texto principal, así que destaca de la página en todos los modos.
| Parte | Color sobre el fondo | Claro | Oscuro | Alto contraste | Necesita |
|---|---|---|---|---|---|
Etiqueta del tipo | --luz-text-secondary on --luz-surface-strong | 5.3:1 | 5.4:1 | 16.5:1 | 4.5:1 |
Mensaje | --luz-text-primary on --luz-surface-strong | 13.5:1 | 10.9:1 | 18.0:1 | 4.5:1 |
Botón de cierre | --luz-text-secondary on --luz-surface-strong | 5.3:1 | 5.4:1 | 16.5:1 | 4.5:1 |
Anillo de foco | --luz-focus-ring on --luz-surface-strong | 4.8:1 | 5.6:1 | 18.0:1 | 3:1 |
Medido a partir de los valores de los tokens de cada modo, redondeado hacia abajo. «Necesita» indica el mínimo AA de WCAG 2.2: 4,5:1 para texto y 3:1 para anillos de foco, bordes e iconos.
- Foco: el aviso no recibe el foco al aparecer. El botón de cierre tiene un contorno de
--luz-focus-ringde 2 px, a 2 px por fuera. - No solo el color: el tipo se indica con una palabra («Correcto»), no con un color.
- Área interactiva: el botón de cierre mide al menos 28 px cuadrados.
Tokens que usa
Los 18 tokens que lee components/toast.css, por familia. Cada familia enlaza a su página, con los valores de todos los modos. En Figma son variables con los mismos nombres: consulta Tokens en Figma.
- Color
--luz-divider,--luz-focus-ring,--luz-surface-strong,--luz-text-primary,--luz-text-secondary- Spacing and sizing
--luz-control-sm,--luz-space-3xs,--luz-space-md,--luz-space-sm,--luz-space-xs- Typography
--luz-font-mono,--luz-text-lg,--luz-text-sm,--luz-text-xs- Radius
--luz-radius-md,--luz-radius-sm- Shadows
--luz-shadow-md- Motion
--luz-duration-base
Teclado y ARIA están en la pestaña Código.