Skip to content
Backtalk

Button

Button styles are mixins applied to any element. Base element styles handle cursor, font, and focus — the mixin handles appearance.

The same mixin works on <button> and <a> elements. Each variant resets :visited explicitly so link elements stay visually consistent.

See live demos →

Usage

Section titled “Usage”
@use 'mixins' as *;


.my-button {
  @include button-primary;
}


// combine variant with size and shape
.my-button {
  @include button-ghost;
  @include button-lg;
  @include button-pill;
}

Variants

Section titled “Variants”

button-primary

Section titled “button-primary”

Main call to action. Use once per view.

@include button-primary;
  • Background: --color-interactive
  • Text: --color-neutral-50
  • Hover: --color-interactive-hover + shadow depth 2
  • Active: --color-interactive-active

button-secondary

Section titled “button-secondary”

Supporting action. Lower visual weight than primary.

@include button-secondary;
  • Background: --color-surface
  • Text: --color-text
  • Border: --color-border
  • Hover: --color-surface-raised + shadow depth 2

button-ghost

Section titled “button-ghost”

Minimal. Use on surfaces where a border is enough.

@include button-ghost;
  • Background: transparent
  • Text: --color-interactive
  • Border: --color-interactive
  • Hover: --color-interactive-muted
  • No shadow

button-danger

Section titled “button-danger”

Destructive actions. Confirm before executing.

@include button-danger;
  • Background: --color-error
  • Text: white
  • Hover: --color-error-text

Sizes

Section titled “Sizes”

Size mixins override padding and font size. Combine with any variant:

.my-button {
  @include button-primary;
  @include button-sm;
}

button-sm

Section titled “button-sm”
@include button-sm;

button-lg

Section titled “button-lg”
@include button-lg;

Default size is set by box-button in button-base — see Padding for the base values.

Shapes

Section titled “Shapes”

Shape mixins override border radius. Combine with any variant:

button-pill

Section titled “button-pill”

Full pill — border-radius: 100vw.

@include button-pill;

button-icon

Section titled “button-icon”

Square button for icon-only use. Equal padding on all sides, aspect-ratio: 1.

@include button-icon;

button-base

Section titled “button-base”

The shared foundation used by all variants. Applied automatically — not typically used directly. Handles display, alignment, spacing, shadow, and transitions. Base element styles (cursor, font, focus-ring) are applied separately in base/elements/_form.scss.

// rarely needed directly — use a variant instead
@include button-base;