Buttons — Monarch Design System

Variants

Button Types

HTML

<button class="monarch-btn monarch-btn-primary">Primary</button>
<button class="monarch-btn monarch-btn-secondary">Secondary</button>
<button class="monarch-btn monarch-btn-ghost">Ghost</button>
<button class="monarch-btn monarch-btn-danger">Danger</button>
<button class="monarch-btn monarch-btn-outline">Outline</button>

Sizes

Button Sizes

HTML

<button class="monarch-btn monarch-btn-primary monarch-btn-sm">Small</button>
<button class="monarch-btn monarch-btn-primary">Medium</button>
<button class="monarch-btn monarch-btn-primary monarch-btn-lg">Large</button>

With Icons

Icon Buttons

HTML

<button class="monarch-btn monarch-btn-primary">
  <svg>...</svg> Add Account
</button>
<button class="monarch-btn monarch-btn-outline">
  <svg>...</svg> Export
</button>
<button class="monarch-btn monarch-btn-ghost monarch-btn-icon">
  <svg>...</svg>
</button>

States

Loading & Disabled

HTML

<button class="monarch-btn monarch-btn-primary monarch-btn--loading">
  <svg class="monarch-btn__spinner">...</svg> Saving...
</button>
<button class="monarch-btn monarch-btn-primary" disabled>Disabled</button>

Variants Table

Variant	Use When	Class
Primary	Main CTA — one per visible area. Save, Submit, Create.	.monarch-btn-primary
Secondary	Supporting action alongside primary. Cancel, View Details.	.monarch-btn-secondary
Ghost	Tertiary actions, toolbar items, minimal footprint.	.monarch-btn-ghost
Danger	Destructive actions — Delete, Remove, Disconnect.	.monarch-btn-danger
Outline	Neutral bordered actions — Export, View, secondary navigation.	.monarch-btn-outline