Button modifiers

Basic button utilities modify the foundation button styles with the CSS variables used for property values so depend on $enable-forms-buttons also being enabled to function. Disabled by default, requires $enable-buttons and $enable-forms-buttons enabled in the configuration.scss document.

Basic utilities (anchor)

Example HTML

<button class="btn-xs">.btn-xs</button>
<button class="btn-sm">.btn-sm</button>
<button>Regular</button>
<button class="btn-lg">.btn-lg</button>
<button class="btn-xl">.btn-xl</button>

Example HTML

<button class="btn-outline">.btn-outline</button>

Colors (anchor)

With $enable-theme-colors: true;

Example HTML

<button class="btn-dark">.btn-dark</button>
<button class="btn-light">.btn-light</button>

With $enable-primary-colors: true;

Example HTML

<button class="btn-blue">.btn-blue</button>
<button class="btn-red">.btn-red</button>
<button class="btn-green">.btn-green</button>
<button class="btn-orange">.btn-orange</button>
<button class="btn-cyan">.btn-cyan</button>

Customize (anchor)

The buttons utilities are compiled from the _buttons.scss document within the [styles/utilities] directory. The Sass @if rules control compiling depending on settings in the configuration.scss document.

Styles

@if $enable-forms-buttons and $enable-buttons {

.btn-outline {
  --btn-bg: var(--body-bg);
  --btn-hover: var(--surf-1);
  --btn-bd-color: var(--surf-3);
}

.btn-xs {
  --fs: var(--fs-xs);
  --btn-py: .2rem;
  --btn-px: .65rem;
}

.btn-sm {
  --fs: var(--fs-sm);
  --btn-py: .25rem;
  --btn-px: .65rem;
}

.btn-lg {
  --fs: var(--h6);
  --btn-py: .35rem;
  --btn-px: .85rem;
}

.btn-xl {
  --fs: var(--h5);
  --btn-py: .5rem;
  --btn-px: 1.25rem;
}

@if $enable-theme-colors {

.btn-dark {
  --color: #fff;
  --btn-bg: var(--surf-1-dark);
  --btn-hover: var(--surf-2-dark);
  --btn-bd-color: var(--surf-2-dark);
  --input-focus-color: var(--surf-4-dark);
}

.btn-light {
  --color: #000;
  --btn-bg: var(--surf-1-light);
  --btn-hover: var(--surf-2-light);
  --btn-bd-color: var(--surf-3-light);
  --input-focus-color: var(--surf-4-light);
}

} // END [if/theme-colors]

@if $enable-primary-colors {

.btn-blue {
  --color: #fff;
  --btn-bg: var(--blue);  
  --btn-hover: var(--blue-light);
  --btn-bd-color: var(--btn-bg);
  --input-focus-color: var(--blue-dark);
}

.btn-red {
  --color: #fff;
  --btn-bg: var(--red);
  --btn-hover: var(--red-light);
  --btn-bd-color: var(--btn-bg);
  --input-focus-color: var(--red-dark);
}

.btn-green {
  --color: #fff;
  --btn-bg: var(--green);
  --btn-hover: var(--green-light);
  --btn-bd-color: var(--btn-bg);
  --input-focus-color: var(--green-dark);
}

.btn-orange {
  --color: #000;
  --btn-bg: var(--orange);
  --btn-hover: var(--orange-lighter);
  --btn-bd-color: var(--btn-bg);
  --input-focus-color: var(--orange-dark); 
}

.btn-cyan {
  --color: #000;
  --btn-bg: var(--cyan);
  --btn-hover: var(--cyan-dark);
  --btn-bd-color: var(--btn-bg);
  --input-focus-color: var(--cyan-lighter);
}

} // END [if/primary-colors]

} // END [if/buttons]