Core · Mostrar contenido
Etiqueta e insignia
Etiqueta un elemento con un estado o categoría breves (etiqueta), o muestra una cantidad (insignia).
Ejemplo
Siete colores de etiqueta y tres insignias con una cantidad.
Problemas conocidos
No se conocen problemas.
Código
Copiar el marcado
<span class="luz-tag luz-tag--green luz-tag--dot">Running</span><a href="/inbox/">Inbox <span class="luz-badge luz-badge--primary">3</span><span class="u-sr-only"> unread</span></a>Variantes y opciones
Una etiqueta usa un color y, si quieres, un punto. Una insignia usa un color.
| Clase | Efecto |
|---|---|
.luz-tag | Neutro: categoría sin estado |
.luz-tag | Colores de información |
.luz-tag | Colores de éxito |
.luz-tag | Colores de advertencia |
.luz-tag | Colores de peligro |
.luz-tag, .luz-tag | Colores adicionales para categorías, sin significado de estado |
.luz-tag | Punto pequeño antes del texto, otra señal además del color |
.luz-badge | Fondo de marca |
.luz-badge | Fondo neutro |
.luz-badge | Fondo de peligro |
Cómo funciona
Elementos <span> en línea, con estilos de components/tag.css. Sin JavaScript.
- Una etiqueta mide al menos 24 px de alto, usa texto extrapequeño y va sobre un tinte de su color.
- Una insignia es una cantidad pequeña y redondeada en tipografía monoespaciada, de al menos 20 px de ancho.
Sin JavaScript
No cambia nada: las etiquetas y las insignias son HTML y CSS.
Teclado y ARIA
Las etiquetas y las insignias no son interactivas ni reciben el foco.
- El significado está en el texto; el color no aporta nada que necesite un lector de pantalla.
- Una cantidad necesita contexto: coloca la insignia dentro del enlace o encabezado que cuenta y añade la unidad como texto oculto visualmente si no aparece en pantalla («3 sin leer»).
El contraste y el foco se explican en la pestaña Diseño.
Diseño
Cuándo usarlo
Usa una etiqueta para asignar a un elemento un estado o una categoría breves, y una insignia para mostrar una cantidad junto a un enlace o encabezado.
Cuándo no usarlo
No uses una etiqueta para una acción: no se puede pulsar.
- Para una acción, usa un botón.
- Para un mensaje, usa una alerta.
- No des significado de estado al turquesa o al morado: son para categorías.
Qué hacer y qué no
Cómo escribir el contenido
Una o dos palabras, en estilo oración: «En ejecución», «Degradado».
- No uses solo el nombre de un color: puede que no se vea.
- Las insignias contienen cifras; limítalas («99+») para que no cambien de tamaño.
Contraste y foco
Cada etiqueta muestra el color de texto sobre su propio tinte; las insignias usan texto blanco sobre un fondo.
| Parte | Color sobre fondo | Claro | Oscuro | Alto contraste | Mínimo necesario |
|---|---|---|---|---|---|
Etiqueta gris | --luz-text-secondary on --luz-surface-strong | 5.3:1 | 5.4:1 | 16.5:1 | 4.5:1 |
Etiqueta azul | --luz-color-info on --luz-color-info-bg over --luz-surface-page | 9.0:1 | 9.7:1 | 13.6:1 | 4.5:1 |
Etiqueta verde | --luz-color-success on --luz-color-success-bg over --luz-surface-page | 5.4:1 | 10.1:1 | 8.9:1 | 4.5:1 |
Etiqueta roja | --luz-color-danger on --luz-color-danger-bg over --luz-surface-page | 5.4:1 | 10.2:1 | 8.9:1 | 4.5:1 |
Etiqueta amarilla | --luz-color-warning on --luz-color-warning-bg over --luz-surface-page | 6.8:1 | 9.0:1 | 8.9:1 | 4.5:1 |
Etiqueta turquesa | --luz-color-teal on --luz-color-teal-bg over --luz-surface-page | 5.4:1 | 7.1:1 | 8.9:1 | 4.5:1 |
Etiqueta morada | --luz-color-purple on --luz-color-purple-bg over --luz-surface-page | 5.4:1 | 12.2:1 | 9.0:1 | 4.5:1 |
Insignia principal | --luz-text-on-fill on --luz-brand-fill | 6.0:1 | 4.9:1 | 14.1:1 | 4.5:1 |
Insignia gris | --luz-text-on-fill on --luz-outline | 4.6:1 | 4.8:1 | 21.0:1 | 4.5:1 |
Insignia de peligro | --luz-text-on-fill on --luz-color-danger-fill | 5.6:1 | 6.0:1 | 9.3:1 | 4.5:1 |
Calculado a partir de los valores de los tokens de cada modo y redondeado hacia abajo. El mínimo necesario corresponde al nivel AA de WCAG 2.2: 4,5:1 para el texto y 3:1 para los anillos de foco, los bordes y los iconos.
- Foco: las etiquetas y las insignias no lo reciben: no son controles.
- No solo el color: la palabra indica el estado;
.luz-tag--dotañade una forma a las etiquetas de estado.
Tokens que usa
Los 24 tokens que lee components/tag.css, agrupados por familia. Cada familia enlaza a su página, donde aparecen los valores de cada modo. En Figma son variables con los mismos nombres: consulta Tokens en Figma.
- Color
--luz-brand-fill,--luz-color-danger,--luz-color-danger-bg,--luz-color-danger-fill,--luz-color-info,--luz-color-info-bg,--luz-color-purple,--luz-color-purple-bg,--luz-color-success,--luz-color-success-bg,--luz-color-teal,--luz-color-teal-bg,--luz-color-warning,--luz-color-warning-bg,--luz-outline,--luz-surface-strong,--luz-text-on-fill,--luz-text-secondary- Spacing and sizing
--luz-space-2xs,--luz-space-xs- Typography
--luz-font-mono,--luz-text-xs- Radius
--luz-radius-full,--luz-radius-sm
El teclado y ARIA se explican en la pestaña Código.