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.
Noticias, normas, o cards con mayor rango de visita por parte de los usuarios.
Noticias, normas, o cards con contenido reciente.
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
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:
