Buttons

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.

Secondary

html<button type="button" class="btn btn--primary">Primary</button>
<a href="https://conedevelopment.com" class="btn btn--secondary">Secondary</a>

Use <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".

Disabled button Disabled button

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.

On this page