Pasar al contenido principal

Etiquetas

Las etiquetas se utilizan para identificar y categorizar la información dentro de una página proporcionando más detalles a los usuarios sobre el contenido que necesitan.

Tipos de etiquetas

Default

Cuando utilizamos las etiquetas en un mismo componente no las diferenciamos por color, sino por texto. En estos casos usamos etiquetas default.

Etiqueta

Cuando las etiquetas tienen un significado semántico se diferencian por colores. Utilizar estas variantes para los siguientes estados:

Éxito

De éxito para casos aprobados, completos, exitosos, finalizados.

Etiqueta

Información

De información para casos en uso, en vivo, publicados, nuevos.

Etiqueta

Advertencia

De advertencia para casos de alerta, fallidos, en pausa, rechazado

Etiqueta

Peligro

De peligro para casos de error, no completados, eliminados.

Etiqueta

Diseño y estructura (contexto de uso)

Dentro de las tarjetas se pueden usar un máximo de tres etiquetas.

completar

En texto

Siempre deben estar alineadas a la izquierda, con el objetivo de que se mantenga un orden de lectura natural.

completar

Aparecen al principio de un artículo con una sola etiqueta principal y/o al final del texto como parte de una sección de “Etiquetas relacionadas”.

completar

Usabilidad

Buenas prácticas

Deshabilitar los diferentes estados cuando la etiqueta es estática. Si la etiqueta es meramente informativa y no se encuentra asociada a un enlace de destino es necesario deshabilitar el hover, on-click y focus.
Usar las etiquetas con moderación. Al combinar las etiquetas con otros elementos visuales se puede generar mucho ruido visual en la pantalla, por lo que es preferible usarlas únicamente si le es útil a la persona ciudadana.

Malas prácticas

No combinar etiquetas estáticas con interactivas. Evitar que una etiqueta con enlace se ubique al lado de otra que no tenga ese atributo. Optar por una de las dos, según sea más pertinente.
Logo del sistema de diseño Obelisco
Los contenidos de buenosaires.gob.ar están licenciados bajo Creative Commons Reconocimiento 2.5 Argentina License.