Ejemplo en vivo
variant
Aprobado
Ejemplos
Todas las variantes
Aprobado
Fondo verde al 30%, texto negro
Reprobado
Fondo rojo al 30%, texto negro
Pendiente
Fondo amarillo al 30%, texto negro
En curso
Celeste oscuro, AA con texto blanco
Abierta
Fondo blanco, contorno verde, texto negro
Lleno
Gris informativo
Cuándo usarlo
Úsalo
- Para mostrar el estado de un registro: notas, pagos, cupos, inscripción.
Evítalo
- Como botón o filtro: no tiene foco ni hover.
- Para decir algo que el color solo no explica: el texto siempre nombra el estado.