Classes from style/buttons.sass. Use the same classes on <button>, <a>, and <NuxtLink>. Stack sizes with full (e.g. btn full color sm).
xxs · xs · sm · md · default · lg · xl · xxl
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.
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>Narrow column only for the demo; in chat, the parent sets width.
Default confirmations: secondary + primary. For irreversible cancel, see Destructive below.
Irreversible actions (cancel project, delete, etc.) use secondary weight btn full light plus text-error (crimson #DC143C / $color-destructive-text). Do not use brand btn color (#FF0032) for the destructive CTA. The safe action stays primary (btn full color).
Stacked modal footer (project cancel):
Chat / Digg row 50/50 (compact sm):
<button type="button" class="btn full light text-error">Cancel project</button>
<button type="button" class="btn full color">Keep project</button> Destructive in chat: same as above — btn full light text-error sm, not brand red fill.
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>