.q2w-btn

Button

Action buttons with primary, ghost, pill, icon, disabled, loading, and SIPETA-inspired floating help states.

Variants

Core button set

<button class="q2w-btn q2w-btn--sm">Small</button>
<button class="q2w-btn">Default</button>
<button class="q2w-btn q2w-btn--lg q2w-btn--primary">Large</button>
<button class="q2w-btn q2w-btn--primary">Primary</button>
<button class="q2w-btn q2w-btn--ghost">Ghost</button>
<button class="q2w-btn q2w-btn--icon">+</button>
<button class="q2w-btn q2w-btn--pill">Pill button</button>
<button class="q2w-btn" disabled>Disabled</button>
<button class="q2w-btn q2w-btn--primary q2w-btn--loading">Loading</button>

.q2w-btn--help

<button class="q2w-btn q2w-btn--help">
  <span class="q2w-btn__badge">i</span>
  Help
</button>

Notes

Pattern	Usage
`.q2w-btn--primary`	Use for the most important action in a panel, modal, or popup footer.
`.q2w-btn--loading`	Use during async operations; text becomes hidden and spinner is injected with CSS.
`.q2w-btn--help`	Use for a fixed help launcher in public-facing exports.

← Sheet Control →