Spruce comes with basic button variations like size, width, color, state and can also generate your custom color variants.
Defaults
You can use two default color variants named: primary and secondary. To overwrite colors, see the configurable variables section.
html<button type="button" class="btn btn--primary">Primary</button><a href="https://conedevelopment.com" class="btn btn--secondary">Secondary</a>
<a>
for links and navigation between pages and <button>
for actions (in page) like a form sending or modal opening.Sizes
Spruce came with three different button sizes: small, regular, large. Using the standard size, you don't have to use any modifier. For small use: btn--sm
, for large use: btn--lg
class.
html<button type="button" class="btn btn--primary btn--sm">Small</button><button type="button" class="btn btn--primary">Regular</button><button type="button" class="btn btn--primary btn--lg">Large</button>
Disabled state
To disable any button element, use the disabled boolean attribute. The disabled style is a bit dimmer (opacity: 0.5;
) and has the pointer-evens: none;
to prevent the user actions.
The disabled attribute doesn't work on links, so you have to use the btn--disabled
modifier class. Also, you should omit the href
attribute and set the aria-disabled="true"
.
html<button type="button" class="btn btn--primary" disabled>Disabled button</button><button type="button" class="btn btn--secondary" disabled>Disabled button</button><a class="btn btn--primary btn--disabled" aria-disabled="true">Disabled button</a><a class="btn btn--secondary btn--disabled" aria-disabled="true">Disabled button</a>
Block Buttons
To display a block button, you can use the btn--block
modifier class.
html<button type="button" class="btn btn--primary btn--block">Block button</button><button type="button" class="btn btn--secondary btn--block">Block button</button>
With Icon
To use any icon with Spruce, you must specify it in image format, preferably in SVG, because we set its height and width. Use with the btn__icon
class on the image. Place it before (left) or after the caption (right) depending on the position.
The .btn
has inline-flex
display with a gap
value.
html<button type="button" class="btn btn--primary"> <svg class="btn__icon">...</svg> Read more</button><button type="button" class="btn btn--secondary"> Read more <svg class="btn__icon">...</svg></button>
Icon
To make an only icon button use the btn--icon
modifier class. If you create an icon button, use aria-label
to add a caption.
html<button class="btn btn--secondary btn--icon" aria-label="Copy Text"> <svg class="btn__icon">...</svg> Read more</button>
Configurable Variables
There are some defaults variables that you can configure to customize the button's look.
scss$btn-border-radius: $border-radius-sm; // 0.25rem$btn-font-size: $font-size-base; // 1rem$btn-font-size-sm: 0.8rem;$btn-font-size-lg: 1.15rem;$btn-font-style: null;$btn-font-weight: 500;$btn-padding: 0.75em 1em;$btn-padding-sm: 0.5em;$btn-padding-lg: 0.9em 1.15em;$btn-icon-size: 0.85em;
Also, Spruce manage the colors in a separate Sass map named $colors (under the btn object).
scss$colors: ( btn: ( primary-background: hsl(261, 52%, 59%), primary-background-hover: hsl(261, 52%, 40%), primary-foreground: hsl(0, 0%, 100%), secondary-background: hsl(350, 100%, 88%), secondary-background-hover: hsl(350, 100%, 92%), secondary-foreground: hsl(350, 100%, 20%) ))
Add Custom Button Variant
You can create new button color variants using the btn-variant
mixin. First, you must declare the new button's colors at the $color
map under the btn
object. After this, all you have to do is to call the mixin on the preferred selector.
scss// You have to specify the additional colors at the very first import of Spruce.@use '~sprucecss/scss/spruce' with ( $colors: ( btn: ( ternary-background: hsl(247, 65%, 49%), ternary-background-hover: hsl(247, 65%, 39%), ternary-foreground: hsl(0, 0%, 100%), ternary-foreground-hover: hsl(0, 0%, 100%), ) ));
// Call the btn-variant mixin with the colors..btn--ternary { @include spruce.btn-variant($color: install-foreground, $background: install-background);}
More information about the btn-variant()
please visit the releated mixin page.