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.

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