StatusIcon

Estado de un ítem en una lista de verificación: done = check positive, pending = reloj disabled. Ícono y color son una sola decisión.

Abrir en Figma (442:29785)

Status done · pending (con nombre accesible)

En filas con la palabra (decorativo)

Empatía · Revisado
Descubrimiento · Revisado
Capacidad de cierre · Pendiente

Ficha

Categoría
Data display
Nivel
átomo
Estado
en revisión
Radix
no
Actualizado
2026-10-26
Figma
442:29785
Fuente
design-system/componentes/StatusIcon.md

Cuándo usarlo

  • Filas de criterios durante la calificación («revisado» / «pendiente»), pasos de una lista de verificación.

Cuándo NO usarlo

  • Íconos decorativos o dentro de botones → Icon.
  • Mensajes con texto → Callout.

Anatomía

Icon de 24: circle-check en icons/positive/07-mid o clock en icons/disabled/05-faint.

Props

PropFigmaValoresPor defecto
statusStatusdone · pendingdone
label—nombre accesibleRevisado / Pendiente
decorative—boolean (la fila ya lleva la palabra)false

Estados

Sin estados.

Accesibilidad

  • Va con texto («Revisado», «Pendiente») o con aria-label; el color nunca es la única pista.

Contenido

Nunca recolorear el ícono en una instancia: se elige el Status (R4).

Errores conocidos

  • Ninguno medido.

Changelog

  • 2026-10-26 · nace (T-02).

Tokens que consume