Badge

Semáforo: Logrado · Por mejorar · Crítico; neutral para lo pendiente, info para Disponible / Nuevo. Siempre color + palabra (DV-21).

Abrir en Figma (393:9637)

Type positive · warning · danger · info · neutral

LogradoPor mejorarCríticoDisponiblePendiente

Ficha

Categoría
Feedback
Nivel
átomo
Estado
en revisión
Radix
no
Actualizado
2026-10-26
Fuente
design-system/componentes/Badge.md

Cuándo usarlo

  • Resultado de un objetivo en la calificación de una simulación, estado de una evaluación o de un paso (reglas/08 §08.3: «Disponible» info, «Completado» positive, «En curso» info, «Nuevo» info).

Cuándo NO usarlo

  • Como botón o filtro (Chip); para puntajes numéricos (no se muestran al ejecutivo).

Anatomía

Píldora padding 4/12, gap 8: punto de 8 + palabra body/sm-strong.

Props

PropFigmaValoresPor defecto
labelLabeltextoLogrado
typeTypepositive · warning · danger · neutral · infopositive

Estados

Sin estados: no es interactivo.

Accesibilidad

  • El punto es decorativo (aria-hidden); la palabra lleva el significado; contraste del texto ≥ 7:1 sobre su superficie.

Contenido

Una o dos palabras, sentence case: «Logrado», «Por mejorar», «Crítico», «Pendiente». Nunca «Bien» (reglas/07 §07.2).

Errores conocidos

  • Ninguno medido.

Changelog

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

Tokens que consume