05. Components: buttons.css

Buttons are intentionally limited. Use the variant that matches the action, not the one that happens to look best on the page.

Variant rule

  • primary : main action, usually one per action group
  • secondary : normal supporting action
  • ghost : quiet toolbar or icon action
  • danger : destructive action with visible border
  • danger-ghost : destructive action with low visual weight
  • link : inline text action, not for standalone buttons
  • disabled : any button can be disabled to prevent interaction

Button markup

<button class="la-btn la-btn-primary" type="button">Save changes</button>
<a class="la-btn la-btn-secondary" href="/items/">Cancel</a>

Always set type="button" on buttons inside forms to prevent accidental submission.

Variants

Each variant signals intent. Choose by action type, not color preference.

.la-btn + variant

Link action

Sizes

The default size fits most contexts. Use sm in compact panels and xs in tight inline contexts like table rows or filter chips.

.la-btn : default

.la-btn-sm

.la-btn-xs

Full-width

Use .la-btn-full when the button should span its container, usually in auth flows, mobile layouts, or narrow form panels.

.la-btn-full