Guía de estilos

Etiquetas

Las etiquetas son utilizadas para indicar algún atributo del contenido mostrado al usuario. El uso más común es para representar estados en los elementos, los cuales pueden ir variando según las acciones que se realicen en el servicio.




Cuándo usar etiquetas

Usa el componente de etiquetas cuando es necesario que el usuario conozca el estado de un elemento o el motivo por el que se le está mostrando algo en la pantalla. Por ejemplo, si tenemos un listado que el usuario ha visto antes, sería útil indicarle que un elemento es nuevo.

Cómo funcionan

Las etiquetas no son elementos interactivos, por lo que no pueden ser confundidas con botones o enlaces. Para evitar esta confusión en los usuarios, el texto que se utilice en ellas no pueden ser verbos, sino que deben ser siempre adjetivos.




Versiones


01 Etiquetas en tarjetas

Utilizado para diferenciar tarjetas según una característica en especial. Por ejemplo, en Gob.pe las utilizamos para indicar a los usuarios por qué se les está mostrando cierto contenido.

MÁS VISTO

Noticias, normas, o cards con mayor rango de visita por parte de los usuarios.

NUEVO

Noticias, normas, o cards con contenido reciente.

DESTACADO

Noticias, normas, o cards con contenido de mayor relevancia.




02 Etiquetas extraíbles

Las etiquetas extraíbles tienen un pequeño botón de cierre (“x”). Son utulizadas para filtros aplicados en un buscador, por ejemplo.

Activo

Es el estado neutral de una etiqueta de este tipo, en que el botón está habilitado.

Deshabilitado

Es el estado en que esta etiqueta tiene la funcionalidad deshabilitada.

Desbordamiento de grupo de etiquetas

Cuando las etiquetas están agrupadas, se deben alinear y pueden pasar a una siguiente línea según el ancho de la pantalla.




03 Etiquetas para múltiples estados

NUEVO
DESISTIDO
ATENDIDO
OBSERVADO
ASIGNADO
ACEPTADO
ARCHIVADO

En caso un servicio requiera mostrar etiquetas para representar múltiples estados, es posible diferenciarlos por color. Lo más importante de estas etiquetas es que el nombre de cada una sea realmente descriptivo para el usuario que va a verlas. Sin embargo, si decidimos también diferenciarlas por colores, debemos considerar qué tonalidades tienen connotaciones negativas (rojos) y connotaciones positivas (verdes, azules). El gris es utilizado normalmente para elementos inhabilitados, archivados, descartados o que ya no son relevantes.

Ejemplo: