Button-CTA - Size and Style Variants

✨ Updated Design System: Buttons now use Rajdhani typography and the updated color palette with purple for primary actions.

Size Variants

Three size variants provide flexibility for different UI contexts and hierarchies.

Small (40px)

Height: 40px
Typography: bodyMd
Padding: 16px horizontal

Medium (48px)

Height: 48px
Typography: bodyMd
Padding: 24px horizontal

Large (56px)

Height: 56px
Typography: bodyLg
Padding: 32px horizontal

Style Variants

Three visual styles establish clear hierarchy and distinguish between primary and secondary actions.

Primary

Filled background
Primary color
High emphasis

Secondary

Outlined border
Primary color text
Medium emphasis

Tertiary

Text only
Primary color text
Low emphasis

Size × Style Matrix

All combinations of size and style variants work together seamlessly.

Size Primary Secondary Tertiary
Small
Medium
Large

Usage Guidance

When to use each variant:

Variant Use Case Example
Small Primary Compact spaces, inline actions Table row actions, card buttons
Medium Primary Standard forms, dialogs Form submit, modal confirm
Large Primary Hero sections, prominent CTAs Landing page signup, checkout
Secondary Alternative actions Cancel, back, secondary options
Tertiary Low-priority actions Learn more, skip, dismiss