Guía de estilos

Etiquetas

Las etiquetas son utilizadas para indicar algún atributo del contenido mostrado al usuario. Su 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 sea 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

1. Etiquetas en tarjetas

Se usan para diferenciar las tarjetas según una característica en especial. Por ejemplo, en Gob.pe las empleamos 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.

2. Etiquetas extraíbles

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

Activo

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

Deshabilitado

Es este estado 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.

3. Etiquetas para múltiples estados

Es posible diferenciar por colores a las etiquetas según sus diferentes estados. Lo más importante es que el nombre de cada una sea descriptivo para el usuario que va a verlas. Al diferenciarlas por colores, considera 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: