Button modifiers

Basic button utility modifiers for the foundation button styles. Disabled by default, requires $enable-buttons: true; and $enable-forms-buttons: true; in the configuration.scss document.

Sizes (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>

Outline (anchor)

Example HTML

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

Button groups (anchor)

Example HTML

<div class="btn-group" role="group" aria-label="Button group">
<button>One</button>
<button>Two</button>
<button>Three</button>
<button>Four</button>
</div>

<div class="btn-group" role="group" aria-label="Button group outline">
<button class="btn-outline">One</button>
<button class="btn-outline">Two</button>
<button class="btn-outline">Three</button>
<button class="btn-outline">Four</button>
</div>

Colors (anchor)

With $enable-theme-colors: true;

Example HTML

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

<div class="btn-group" role="group" aria-label="Button group light">
<button class="btn-light">One</button>
<button class="btn-light">Two</button>
<button class="btn-light">Three</button>
<button class="btn-light">Four</button>
</div>

<div class="btn-group" role="group" aria-label="Button group dark">
<button class="btn-dark">One</button>
<button class="btn-dark">Two</button>
<button class="btn-dark">Three</button>
<button class="btn-dark">Four</button>
</div>

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>

Example HTML

<div class="btn-group" role="group" aria-label="Button group blue">
<button class="btn-blue">One</button>
<button class="btn-blue">Two</button>
<button class="btn-blue">Three</button>
<button class="btn-blue">Four</button>
</div>

<div class="btn-group" role="group" aria-label="Button group red">
<button class="btn-red">One</button>
<button class="btn-red">Two</button>
<button class="btn-red">Three</button>
<button class="btn-red">Four</button>
</div>

<div class="btn-group" role="group" aria-label="Button group green">
<button class="btn-green">One</button>
<button class="btn-green">Two</button>
<button class="btn-green">Three</button>
<button class="btn-green">Four</button>
</div>

<div class="btn-group" role="group" aria-label="Button group orange">
<button class="btn-orange">One</button>
<button class="btn-orange">Two</button>
<button class="btn-orange">Three</button>
<button class="btn-orange">Four</button>
</div>

<div class="btn-group" role="group" aria-label="Button group cyan">
<button class="btn-cyan">One</button>
<button class="btn-cyan">Two</button>
<button class="btn-cyan">Three</button>
<button class="btn-cyan">Four</button>
</div>

Customize (anchor)

The buttons styles can be customized in the _buttons.scss document in the [styles/utilities] directory, they're written as standard CSS with limited Sass functionality included for compiling purposes.

Styles

//  ------------------------------------------------------------
//  Button utilities
//  ------------------------------------------------------------
@use "../../configuration" as *;

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

.btn-outline {
  --btn-bg: var(--body-bg);
  --btn-hover: var(--surf-3);
  --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;
}

.btn-group {
  display: flex;
}

:where(.btn-group *) {
  border-radius: 0;
}

.btn-group *:not(:first-child) {
  margin-inline-start: calc(var(--btn-bd-width) * -1);
}

.btn-group *:first-child {
  border-start-start-radius: var(--btn-radius);
  border-end-start-radius: var(--btn-radius);
}

.btn-group *:last-child {
  border-start-end-radius: var(--btn-radius);
  border-end-end-radius: var(--btn-radius);
}

.btn-group *:is(:focus) {
  box-shadow: none;
}

.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-2-light);
  --input-focus-color: var(--surf-4-light);
}

@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]