Tag
Una etiqueta corta con el estado de un elemento: puntual, retrasado, caído.
En esta página
Playground
Atrasado
Estado
Tamaño
Fondo
<span class="feitio-tag"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-info"></use></svg>Atrasado</span>Cuándo usarlo
- Para el estado de un elemento en una tabla, una lista o un encabezado.
Cuándo no usarlo
- Para algo clickeable: una etiqueta no es ni botón ni enlace.
- Para llamar la atención ("Nuevo", "Destacado" en todas partes): es el "ruidoso".
- Para un aviso: Aviso.
Ejemplos
DraftOnlineLateDown
Cuatro
Neutral, éxito, advertencia y error, siempre con el borde alrededor, para que no desaparezca en una pantalla débil. Nunca naranja, siempre con icono y palabra.
Mostrar código
<span class="feitio-tag" data-status="warn">
<svg class="feitio-icon" aria-hidden="true">…</svg>Atrasado
</span>Reactpronto
Pesado
Al lado de un nombre en una lista o menú, cuando el tamaño regular sería demasiado: este sitio "pronto" en la navegación es uno.
Mostrar código
<span class="feitio-tag" data-size="small">em breve</span>Hacer y no hacer
Do
Late
Una palabra, con icono: legible desde lejos y sin color.
Don’t
Tarde
Naranja, todo mayúsculas, una píldora perfecta y sin icono.
Escritura
- Una o dos palabras, un adjetivo o un estado ("A tiempo", "Tarde").
Accesibilidad
- La palabra es el estado; el icono va junto (
aria-hidden).
Atributos
| Atributo | Valores | Para qué sirve |
|---|---|---|
class="feitio-tag" | obligatorio | La etiqueta. |
data-status | nada, "ok", "warn", "error" | Neutral (sin atributo), éxito, advertencia o error. |
data-size="small" | opcional | El pequeño, junto a un nombre en una lista. |