# Tag Una etiqueta corta con el estado de un elemento: puntual, retrasado, caído. ## Playground ```html Atrasado ``` ## 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 ### 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 ```html Atrasado ``` ### 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 ```html em breve ``` ## 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.