Web ResponsiveComponents
Labels

Labels

Los labels son pequeñas etiquetas que puedes uar al lado de elementos de lista o de cualquier otra pieza de texto y de este modo poder categorizar el contenido o mostrar información extra al usuario . Hay diferentes tipos de labels en función a su significado y, aunque por defecto su utilidad es meramente informativa, también puedes aplicarle cierto nivel de interacción.

Categorías

Default labels: Contienen texto y están clasificados por color en diferentes categorías.

Icon labels: Son como los anteriores pero pueden contener, además del texto, un icono.

Action labels: Muestran selecciones hechas por el usuario. Son los únicos que se pueden cerrar.

Badge labels: Destacan elementos que el usuario aún no ha leído.

Todos los tipos de labels con los colores permitidos.

Posición

Puedes aplicar los labels junto a headings, listas y textos en general. Normalmente se situan por encima del header o al final de un texto, en la parte derecha.

Los action labels también pueden usarse en el interior de form inputs, pero también puedes usarlo bajo un heading o al final de un párrafo.

Default labels aplicados junto a bloques de texto.
Action labels en form inputs y junto a bloques texto.

Badge labels

Aplícalos en la parte superior derecha del elemento que quieras resaltar. Como norma general te aconsejamos que uses los badge labels micro (que son los más pequeños).

En caso que quieras destacar más este elemento puedes optar por usar los badge labels large.

Badge label micro aplicado a “Contactos”.