Design System · Buttons
Buttons — Action in the interface
The action point of the interface. Each variant communicates a different level of hierarchy and intent. Use consistently to guide the user.
Main Variants
Four action hierarchies — use Primary for the main action on each screen
Primary — Ação principal
button className="btn btn-primary btn-md">Iniciar Protocolo</button>
Secondary — Ação secundária
button className="btn btn-secondary btn-md">Ver Relatório</button>
Ghost — Ação terciária / links
.btn-ghost {background: transparent; color: #f27e4b; border: none;}
Dark — Destaque em fundos claros
Disabled — Estado desabilitado
Sizes
Scale of 4 sizes — SM for compact actions, XL for featured CTAs
XL · 17px · p:16 36
With Icon
Icons enrich communication — use SVG 14–16px, always aligned with the text
Interaction States
All visual states — live demonstrations with hover and active
| Estado | Demo | Descrição | CSS |
|---|
| Default | | Estado inicial do botão | .btn-primary |
| Hover | | scale(1.02) + shadow laranja | :hover |
| Active | | scale(0.98) — feedback de click | :active |
| Loading | | Spinner branco, texto invisível | .btn-loading |
| Disabled | | opacity: .4, cursor: not-allowed | [disabled] |
Button Groups
Compositions for related actions