Buttons — Interplanetary UI

Standard Button

Default button style with secondary colors. Use for secondary actions.

Code

<button class="ip-btn">Standard</button>

Primary Button

High-emphasis button with filled accent background. Use for primary actions and CTAs.

Code

<button class="ip-btn-primary">Primary Action</button>

Accent Button

Outline button with accent color. Use for alternative actions that need visual emphasis.

Code

<button class="ip-btn-accent">Accent</button>

Icon Button

Square button for icons. Content must be wrapped in .ip-btn-icon-content.

Code

<button class="ip-btn-icon">
  <span class="ip-btn-icon-content">×</span>
</button>

Button Group

Group related buttons together with connected borders.

Code

<div class="ip-btn-group">
  <button class="ip-btn">Left</button>
  <button class="ip-btn">Center</button>
  <button class="ip-btn">Right</button>
</div>

States

Disabled state for buttons.

Code

<button class="ip-btn-primary" disabled>Disabled</button>
<button class="ip-btn" disabled>Disabled</button>

Rounded

Add .ip-rounded for 6px border radius.

Code

<button class="ip-btn-primary ip-rounded">Primary</button>
<button class="ip-btn ip-rounded">Standard</button>
<button class="ip-btn-accent ip-rounded">Accent</button>