Buttons

Buttons are composed from a base .sw-btn class plus optional size and style modifiers. Medium size and primary style are the defaults and don't need to be applied explicitly.

Sizes

Modifier	Font size	Padding	Radius	Icon gap
.sw-btn--xxs	10px	4px 12px	360px	2px
.sw-btn--xs	14px	8px 14px	6px	2px
.sw-btn--s	16px	10px 16px	8px	4px
.sw-btn (default)	18px	12px 18px	10px	6px
.sw-btn--l	20px	16px 24px	12px	8px
.sw-btn--xl	24px	18px 24px	14px	8px

Styles

Modifier	Use
.sw-btn (default)	Primary action — solid primary surface
.sw-btn--secondary	Secondary action — solid secondary surface
.sw-btn--secondary-outline	Outlined action — outlined on white surface
.sw-btn--tertiary	Tertiary action — solid tertiary surface
.sw-btn--text	Text-only action — transparent surface with link-coloured text

With icons

Buttons lay out their children with display: flex and an 8px gap, so an icon can be added either side of the label. Wrap the label in a <span> and place an <i> for the icon — order in the markup determines which side it appears.

<button class="sw-btn">
  <span>Label</span>
  <i>→</i>
</button>

The pattern works at any size — the gap scales with the size modifier (see the table above).

States

All styles respond to :hover, :active, :focus, and :disabled.

Loading

Add .sw-btn--loading to show an in-progress state. The label is hidden and replaced by an animated three-dot indicator, while the button keeps its original size so layout doesn't shift. Pointer events are disabled for the duration, and the animation is suppressed for users who prefer reduced motion.

<button class="sw-btn sw-btn--loading">Save</button>