Core · Avisos y estado

Alerta

Informa al lector sobre la página o una tarea: comunica información, un éxito, un aviso o un error.

components/alert.css
Sin JavaScript
Claro · Oscuro · Alto contraste
Sin problemas conocidos

Esta traducción la ha escrito una IA y todavía no la ha revisado ninguna persona. Leer esta página en inglés

Ejemplo

Los cuatro tipos de alerta: información, éxito, aviso y error.

Information

A new version is available.

Success

Deployment completed.

Warning

Storage is almost full.

Error

The build failed.

Problemas conocidos

Ninguno conocido.

Código

Copiar el marcado

HTML

<div class="luz-alert luz-alert--warning">
  <div class="luz-alert__icon" aria-hidden="true"><svg viewBox="0 0 24 24" width="20" height="20">…</svg></div>
  <div>
    <div class="luz-alert__title">Warning</div>
    <div class="luz-alert__body">Storage is almost full.</div>
  </div>
</div>

Variantes y opciones

Una clase modificadora define el estado. Indica también el estado en el título: el color es solo una pista adicional.

Clase	Uso
`.luz-alert--info`	Información útil
`.luz-alert--success`	Una tarea que ha terminado correctamente
`.luz-alert--warning`	Algo que puede salir mal pronto
`.luz-alert--error`	Algo que ha salido mal y requiere actuar

Cómo funciona

Un bloque con un icono, un título y un cuerpo, al que da estilo components/alert.css. No necesita JavaScript.

El icono es un SVG de la página Iconos, decorativo (aria-hidden="true"): el título ya indica el estado.
El borde inicial y el título usan el color del estado; el cuerpo mantiene el color de texto secundario.

Sin JavaScript

No cambia nada: la alerta es HTML y CSS estáticos.

Teclado y ARIA

Una alerta no es interactiva ni recibe el foco.

Una alerta que ya está en la página cuando se carga no necesita role.
Una alerta que aparece tras una acción debe anunciarse: insértala en un contenedor que ya esté en la página con role="status", o con role="alert" si es un error que requiere atención inmediata.

El contraste y el foco están en la pestaña Diseño.

Diseño

Cuándo usarlo

Usa una alerta para comunicar al lector un estado importante de esta página.

Información que necesita antes de actuar: «Este proyecto está archivado».
El resultado de una tarea: éxito, aviso o error.

Cuándo no usarlo

No uses una alerta para un mensaje que deba detener al lector ni para uno que pueda pasar por alto sin consecuencias.

Para una decisión que el lector debe tomar antes de continuar, usa un diálogo modal.
Para una confirmación breve que no requiere actuar, usa un aviso emergente.
Para un error en un campo, ponlo junto al campo (campos de formulario).
Si hay más de dos alertas a la vez, combínalas; de lo contrario, el lector dejará de leerlas.

Qué hacer y qué no

Hazlo Explica qué ha pasado y qué hacer a continuación: «Queda poco espacio. Elimina compilaciones antiguas o cambia de plan».

Evítalo «Algo ha salido mal» no indica qué ha fallado ni qué puede hacer el lector.

Cómo escribir el contenido

Explica qué ha pasado y qué hacer a continuación.

El título indica el estado en una o dos palabras: «Aviso», «Error de compilación».
El cuerpo consta de una o dos frases breves: «La compilación ha fallado. Comprueba el registro y vuelve a ejecutarla».
No dependas solo del color o del icono.

Contraste y foco

Cada título usa el color de su estado sobre un fondo tintado; el texto del cuerpo es igual en todos los fondos.

Parte	Color sobre el fondo	Claro	Oscuro	Alto contraste	Mínimo
Título, información	`--luz-color-info` on `--luz-color-info-bg` over `--luz-surface-page`	9.0:1	9.7:1	13.6:1	4.5:1
Título, éxito	`--luz-color-success` on `--luz-color-success-bg` over `--luz-surface-page`	5.4:1	10.1:1	8.9:1	4.5:1
Título, aviso	`--luz-color-warning` on `--luz-color-warning-bg` over `--luz-surface-page`	6.8:1	9.0:1	8.9:1	4.5:1
Título, error	`--luz-color-danger` on `--luz-color-danger-bg` over `--luz-surface-page`	5.4:1	10.2:1	8.9:1	4.5:1
Cuerpo, información	`--luz-text-secondary` on `--luz-color-info-bg` over `--luz-surface-page`	6.3:1	6.0:1	18.5:1	4.5:1
Cuerpo, éxito	`--luz-text-secondary` on `--luz-color-success-bg` over `--luz-surface-page`	6.3:1	6.0:1	18.6:1	4.5:1
Cuerpo, aviso	`--luz-text-secondary` on `--luz-color-warning-bg` over `--luz-surface-page`	6.3:1	5.7:1	18.4:1	4.5:1
Cuerpo, error	`--luz-text-secondary` on `--luz-color-danger-bg` over `--luz-surface-page`	6.2:1	6.5:1	18.4:1	4.5:1

Medido a partir de los valores de los tokens de cada modo y redondeado hacia abajo. El mínimo requerido es el de WCAG 2.2 AA: 4,5:1 para texto y 3:1 para anillos de foco, bordes e iconos.

Foco: la alerta no recibe el foco. Los enlaces y botones que contiene conservan su propio anillo de foco.
No depende solo del color: el título indica el estado y el icono tiene una forma propia. El borde inicial es un detalle decorativo.

Tokens que usa

Los 18 tokens que lee components/alert.css, agrupados por familia. Cada familia enlaza a su página, donde aparecen los valores de todos los modos. En Figma son variables con los mismos nombres: consulta Tokens en Figma.

Color: --luz-color-danger, --luz-color-danger-bg, --luz-color-info, --luz-color-info-bg, --luz-color-success, --luz-color-success-bg, --luz-color-warning, --luz-color-warning-accent, --luz-color-warning-bg, --luz-text-secondary
Spacing and sizing: --luz-space-3xs, --luz-space-md, --luz-space-sm
Typography: --luz-text-base, --luz-text-md, --luz-text-sm
Radius: --luz-radius-md
Motion: --luz-duration-base

El teclado y ARIA están en la pestaña Código.