Controles · chips-and-states
Etiquetas, chips y estados
Aprobado2026-10-02 · Aprobado por el founder en la revisión visual.
Marcar tipo, estado o contadores.
Vista · datos de ejemplo
Etiqueta de sistemaInstalando · 3 de 703 / 03
ClienteProveedorPlan Profesional
En líneaEmitiendoPor confirmarBorradorEn vivo
Anatomía
- Etiqueta de sistema (Ubuntu Mono mayúsculas)
- Chip con borde
- Estado: cuadrado de 8 px + etiqueta
- 'EN VIVO'
Sí
- Naranja = activo o alerta, verde = en línea, gris = inactivo
No
- No uses píldoras redondeadas ni otros colores
HTML exacto
<div style="display:flex;flex-direction:column;gap:18px">
<div class="nu-botones"><span class="nu-etiqueta">Etiqueta de sistema</span><span class="nu-etiqueta">Instalando · 3 de 7</span><span class="nu-etiqueta">03 / 03</span></div>
<div class="nu-botones"><span class="nu-chip">Cliente</span><span class="nu-chip">Proveedor</span><span class="nu-chip nu-chip--acento">Plan Profesional</span></div>
<div class="nu-botones"><span class="nu-estado nu-estado--en-linea">En línea</span><span class="nu-estado nu-estado--activo">Emitiendo</span><span class="nu-estado nu-estado--alerta">Por confirmar</span><span class="nu-estado">Borrador</span><span class="nu-vivo">En vivo</span></div>
</div>Clases: .nu-etiqueta .nu-chip .nu-chip--acento .nu-estado .nu-vivo · Fragmento: snippets/chips-and-states.html