Estados y chips
Una etiqueta de estado dice una cosa y usa un color semántico. Nunca se usa el color de marca para un estado.
Etiquetas de estado
Enviado
Respuesta nueva
Enviando…
Bloqueado
Sin asignar
<span class="mr-state mr-state-success">
<i class="ri-check-line"></i>Enviado
</span>
<span class="mr-state mr-state-info">
Respuesta nueva
</span>
<span class="mr-state mr-state-warning">
Enviando…
</span>
<span class="mr-state mr-state-danger">
<i class="ri-lock-line"></i>Bloqueado
</span>
<span class="mr-state mr-state-neutral">
Sin asignar
</span>Chips
Dato corto y clicable (teléfono, correo), en gris. Un chip muestra un dato; la acción de editar es un botón (ver Botones).
<div class="mr-chips">
<a class="mr-chip" href="#estados"><i class="ri-phone-line"></i>55 1234 5678</a>
<a class="mr-chip" href="#estados"><i class="ri-mail-line"></i>maria.lopez@ejemplo.mx</a>
</div>Propiedad con etiqueta
Etiqueta pequeña en gris y valor debajo. Se usa en las pestañas de detalle.
Correo electrónico
Canal de obtención
Facebook
<div class="w-100" style="max-width: 320px;">
<div class="mr-prop">
<div class="mr-prop-label">Correo electrónico</div>
<div><a href="#estados" class="mr-link">maria.lopez@ejemplo.mx</a></div>
</div>
<div class="mr-prop">
<div class="mr-prop-label">Canal de obtención</div>
<div>Facebook</div>
</div>
</div>
Sí
Una etiqueta de estado usa 1 a 3 palabras y el tono que corresponde: verde si salió bien, ámbar si está pendiente, rojo si falló.
No
No inventes colores nuevos para un estado ni pongas una oración dentro de la etiqueta.
Distribución por estado
Una barra segmentada con una leyenda que dice el nombre, el porcentaje y, si lo necesitas, lleva al listado filtrado. Los colores son de los tonos del kit, no de Bootstrap.
<div class="mr-seg" role="img" aria-label="Nuevo 28%, Perdido 72%">
<span class="mr-tone-success" style="width: 28%"></span>
<span class="mr-tone-muted" style="width: 72%"></span>
</div>
<ul class="mr-legend">
<li><a href="…"><span class="mr-dot mr-tone-success"></span>Nuevo<span class="mr-legend-value">28%</span></a></li>
</ul>
{{-- Tonos: success, warning, danger, info, brand, muted --}}