Button components
Figma kit alignment: primary (filled), secondary (outline), text, and icon variants. Sizes: medium (default), .twin-btn--sm, .twin-btn--xs. Trailing icon uses .twin-btn__icon + Material Symbols ligature text (e.g. arrow_forward).
Primary
Medium
Small
Tiny
Default
Disabled
Hover / focus / pressed use palette tokens (--pb-0, --pb-60).
Secondary (outline)
Medium
Small
Tiny
Default
Disabled
Text
Medium
Small
Tiny
Default
Disabled
Icon buttons
Classes: .twin-icon-btn .twin-icon-btn--filled|.twin-icon-btn--outline|.twin-icon-btn--ghost + --md (default 56px), --sm, --xs.
Filled
Outline
Ghost
Medium
Small
Tiny
Disabled
Legacy persona (unchanged)
← Mockups index