Design System · Demo
Fundamentos, patrones y componentes del Design System con estructura guiada.
Inventario de la categoria
Listado completo de componentes incluidos en este grupo.
badge
status-badge
labeled-status-badge
ai-badge
alert
callout
progress
progress-bar
skeleton
avatar
Badges
Badge base, StatusBadge de estatus de personal, LabeledStatusBadge y AIBadge.
Badge (variants)
Default
Secondary
Outline
Destructive
StatusBadge — estatus canónicos
ActivoOnboardingOffboardingInactivoIncapacidadContrato por vencerDocs pendientesBloqueadoCandidatoJubilado
LabeledStatusBadge — con etiqueta semántica
Situación:ActivoEstatus:Docs pendientesIncapacidad
AIBadge — marca de contenido generado por IA
AIAI 65%AI 92%
Alertas y callouts
Mensajeria persistente
Alert y Callout inline para contexto operativo, restricciones visibles y ayuda contextual.
Alert
Mensaje de estado para el usuario final.
Callout info Este componente comunica contexto operativo y CTA secundaria.
Callout warning Advertencia sin acción — tono de aviso.
Progreso y carga
Avance de configuracion68%
Skeletons
Avatar
Fallback derivado del nombre. Ideal para chips de usuario y listas.