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 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-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;
}
@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-2-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]