Insignias

Transmiten información dinámica, como recuentos o estado. Puede incluir etiquetas o números.

Proporcionan información adicional, notificaciones, feedback y accesos rápidos sobre elementos específicos. Mejoran la comunicación visual y la interacción del usuario al resaltar características importantes, estados o notificaciones relevantes en la interfaz.

Estos son los aspectos que influyen en cuándo y donde utilizarlos:

  • Indicadores: Las insignias son pequeños elementos gráficos, como números o iconos, que se superponen o se colocan cerca de un elemento en la interfaz para llamar la atención del usuario. Sirven como indicadores visuales para resaltar ciertas características, estados o notificaciones relacionadas con el elemento.

  • Notificaciones: Las insignias se utilizan comúnmente para mostrar notificaciones y alertas sobre nuevos mensajes, actualizaciones o eventos relevantes relacionados con un elemento.

  • Feedback: Las insignias también se utilizan para proporcionar feedback sobre el estado o la condición de un elemento.

  • Contadores: Las insignias a menudo se utilizan para mostrar contadores o recuentos de elementos relacionados.

  • Atajos: En algunos casos, las insignias se utilizan como atajos o accesos directos a acciones o funcionalidades específicas. Al hacer clic en la insignia, los usuarios pueden realizar rápidamente la acción asociada sin necesidad de navegar a través de múltiples pantallas o menús.

  • Personalización: Las insignias también pueden utilizarse para personalizar la apariencia de la interfaz y reflejar el branding o la identidad visual de una aplicación o sitio web. Pueden tener formas, colores y estilos únicos que se alinean con la estética general de la interfaz.

Insignia como indicador

HTML

<span class="insignia"></span>

CSS

.insignia {
background-color: #E33535;
border-radius: 8px;
height: 12px;
mix-blend-mode: normal;
position: relative;
width: 12px;
}

JS

Insignia con número

6 32
Registro de Notas 34

HTML

<span class="insignia-numero ">34</span>

CSS

.insignia-numero {
align-items: center;
background: #E33535;
border-radius: 10px;
color: #FFFFFF;
display: flex;
font-family: 'Montserrat';
font-size: 10px;
font-style: normal;
font-weight: 500;
gap: 10px;
height: 20px;
justify-content: center;
line-height: 20px;
max-width: 30px;
padding: 0px 8px;
}

JS

Insignias con etiquetas

ALERTA Estado Información otros
Registro de Notas nuevo

HTML

<span class="insignia-etiqueta insignia-alerta">ALERTA</span>
<span class="insignia-etiqueta insignia-estado">ESTADO</span>
<span class="insignia-etiqueta insignia-info">INFORMACION</span>
<span class="insignia-etiqueta insignia-otros">OTROS</span>

CSS

.insignia-etiqueta {
align-items: center;
border-radius: 10px;
color: #FFFFFF;
display: flex;
flex-direction: column;
font-family: 'Montserrat';
font-size: 12px;
font-style: normal;
font-weight: 500;
gap: 10px;
height: 20px;
justify-content: center;
line-height: 20px;
mix-blend-mode: normal;
padding: 0px 8px;
text-transform: uppercase;
width: fit-content;
}

.insignia-alerta {
background: #DD7A23;
}

.insignia-estado {
background: #27BB22;
}

.insignia-info {
background: #3D8DDD;
}

.insignia-otros {
background: #B257B7;
}

JS

Código copiado al portapapeles