Buttons

Button styles are mixins, not classes — apply them to any element. The same mixin works on <button> and <a>. Base element styles handle cursor, font, and focus — the mixin handles appearance.

Usage

@use "mixins" as *;

// on a button element
.my-button {
  @include button-primary;
}

// on a link element — identical mixin
.my-link {
  @include button-primary;
}

// combine variants with sizes and shapes
.my-button {
  @include button-ghost;
  @include button-lg;
  @include button-pill;
}

Variants

Four semantic variants covering the full range of action hierarchy.

Primary

Main call to action. Use once per view.


@include button-primary;

Secondary

Supporting action. Lower visual weight than primary.


@include button-secondary;

Ghost

Minimal. Use on surfaces where a border is enough.


@include button-ghost;

Danger

Destructive actions. Confirm before executing.


@include button-danger;

States

All interactive states shown simultaneously for comparison.

Primary

Default

Hover

Active

Disabled

Focus

Secondary

Default

Hover

Active

Disabled

Focus

Ghost

Default

Hover

Active

Disabled

Focus

Danger

Default

Hover

Active

Disabled

Focus

Sizes

Three sizes driven by box-button($size). Combine with any variant.

@include button-sm;

@include button-primary;

@include button-lg;

Shapes

Shape modifiers compose with any variant.

@include button-primary;

@include button-primary + button-pill;

@include button-primary + button-icon;

Element Usage

The same mixin on different elements. Use <button> for actions, <a> for navigation. Never use <a> without an href.

Native button element. Use for actions that do not navigate.


@include button-primary;

Link Element

<a>

Link styled as button. Use for actions that navigate.


@include button-primary + :visited reset;

Do and Don't

Do

Use <button> for actions that do not navigate
Use <a> with href for navigation styled as a button
Combine size and shape modifiers with variant mixins
Use one primary button per view
Keep button labels short and action-oriented

Don't

Don't use <a> without href
Don't use <div> or <span> as buttons
Don't use multiple primary buttons in the same view
Don't rely on color alone to communicate button meaning
Don't remove focus styles — keyboard users need them