Buttons

Classes from style/buttons.sass. Use the same classes on <button>, <a>, and <NuxtLink>. Stack sizes with full (e.g. btn full color sm).

Sizes (inline, light / color)

xxs · xs · sm · md · default · lg · xl · xxl

Outline (border)

btn withBorders — transparent background and border; same usage as the “Browse” link in HeaderSection.vue. Combine with size classes (sm, xl, etc.) and with full when you need full width.

Outline row (grouped cells)

btn-row withBorders — same outline language as btn withBorders (transparent + border), but one shared shell with independent cells and dividers. Not a selector: each cell fires its own action. Always full width; sizes mirror btn full (default is taller than md). Used on producer profile secondary actions (Subscribe · Tip · Hire).

<div class="btn-row withBorders" role="group">
  <button type="button" class="btn-row__cell">Subscribe</button>
  <button type="button" class="btn-row__cell">Tip</button>
  <button type="button" class="btn-row__cell">Hire</button>
</div>

Full width + size (chat / compact)

Narrow column only for the demo; in chat, the parent sets width.

Modal footer (right-aligned)

Chat row 50/50 (e.g. offer — compact sm)

Cancel / destructive uses the same weight as secondary (light), not red.

Icon buttons (round)

btn icon with size sm (30px), md (35px), or lg (40px). Combine with color, light, or utility backgrounds (e.g. bg-bunker-500). Used in upload file rows, navbar, and back navigation.

<button type="button" class="btn icon sm bg-bunker-500 hover:bg-bunker-600">…</button>
<button type="button" class="btn icon sm color">…</button>

As link