Button

Button component pack for Seed

Use Seed’s custom button styles for actions in forms, dialogs, and more. Includes support for a handful of contextual variations, sizes, states, and more.

Install

npm install seed-button --save

Dependencies

Example

There are 3 button styles in Seed. Add .c-button to any selector to create a button!

<button class="c-button">Regular</button>
<button class="c-button c-button--primary">Primary</button>
<button class="c-button c-button--link">Link</button>

Primary buttons

Just a heads up regarding primary buttons - Try to have only 1 primary button per view. Remember.. When every button is primary, no button will be.

<button class="c-button c-button--primary">OMG</button>
<button class="c-button c-button--primary">Too many</button>
<button class="c-button c-button--primary">Primary buttons!</button>

Styling non-button elements

As long as you attach the .c-button class, the button style can be applied to any selector. Just a heads up, for accessbility purposes, be sure to add role="button" to non-buttons if you choose to “buttonize” them.

Link disguised as Button

<a href="#" role="button" class="c-button">Link disguised as Button</a>

Sizes

Alternate button sizes are available but should be used sparringly. Avoid using large/small buttons next to standard sized buttons or form elements.

Large buttons

<button class="c-button c-button--lg">Regular</button>
<button class="c-button c-button--primary c-button--lg">Primary</button>
<button class="c-button c-button--link c-button--lg">Link</button>

Medium buttons

<button class="c-button c-button--md">Regular</button>
<button class="c-button c-button--primary c-button--md">Primary</button>
<button class="c-button c-button--link c-button--md">Link</button>

Small buttons

<button class="c-button c-button--sm">Regular</button>
<button class="c-button c-button--primary c-button--sm">Primary</button>
<button class="c-button c-button--link c-button--sm">Link</button>

States

Below are state styles that can be applied to .c-button elements.

<button class="c-button is-success">Success</button>
<button class="c-button is-error">Error</button>
<button class="c-button is-warning">Warning</button>

Disabled

<button class="c-button" disabled>Regular</button>
<button class="c-button c-button--primary" disabled>Primary</button>
<button class="c-button c-button--link" disabled>Link</button>

Button groups

<div class="o-control-group" role="group">
  <button class="c-button c-button--sm">Button</button>
  <button class="c-button c-button--sm">Button</button>
  <button class="c-button c-button--sm">Button</button>
</div>

Configurations

Below are the default Sass configuration variables for seed-button. The variables can be found in the pack’s _config.scss file.

seed-button/_config.scss
// Namespace
$seed-button-namespace: "c-button" !default;
$seed-button-primary-namespace: "primary" !default;
$seed-button-link-namespace: "link" !default;
$seed-button-error-namespace: "is-#{$seed-states-error-namespace}" !default;
$seed-button-success-namespace: "is-#{$seed-states-success-namespace}" !default;
$seed-button-warning-namespace: "is-#{$seed-states-warning-namespace}" !default;

// Animation
$seed-button-transition: all 0.1s ease !default;

// Border
$seed-button-border-radius: $seed-border-radius !default;
$seed-button-border-size: $seed-border-size !default;
$seed-button-border-style: $seed-border-style !default;

// Font
$seed-button-font-size: 1rem !default;
$seed-button-font-weight: normal !default;

// Height
$seed-button-height: $seed-control-size-default !default;
$seed-button-line-height: $seed-button-height - ceil($seed-button-border-size * 2) !default;

// Padding
$seed-button-padding: 0 1em !default;

// Sizes
$seed-button-sizes: (
  sm: (
    font-size: 0.875rem,
    height: _get($seed-control-sizes, sm),
    line-height: _get($seed-control-sizes, sm) - ceil($seed-button-border-size * 2),
    padding: 0 0.5em
  ),
  md: (
    font-size: 1rem,
    height: _get($seed-control-sizes, md),
    line-height: _get($seed-control-sizes, md) - ceil($seed-button-border-size * 2),
    padding: 0 1em
  ),
  lg: (
    font-size: 1.25rem,
    height: _get($seed-control-sizes, lg),
    line-height: _get($seed-control-sizes, lg) - ceil($seed-button-border-size * 2),
    padding: 0 1.5em
  )
) !default;

// Colors
$seed-button-color: (
  background: (
    default: #fff,
    hover: #f9f9f9,
    active: #f4f4f4
  ),
  border: (
    default: #ddd,
    hover: #ddd,
    active: #ddd,
    focus: #3197D6
  ),
  box-shadow: (
    default: none,
    active: 0 1px 2px rgba(black, 0.2) inset,
    focus: none
  ),
  text: #2b2b2b,
) !default;

$seed-button-styles: (
  primary: (
    _generate-states: false,
    background: (
      default: #3197D6,
      hover: darken(#3197D6, 4),
      active: darken(#3197D6, 8)
    ),
    border: (
      default: #237AB3,
      hover: #237AB3,
      active: #237AB3,
      focus: #237AB3
    ),
    box-shadow: (
      focus: 0 0 0 1px rgba(white, 0.4) inset
    ),
    text: (
      default: #fff,
      hover: #fff,
      active: #fff,
      focus: #fff,
    ),
  ),

  link: (
    _generate-states: true,
    background: (
      default: transparent,
      hover: transparent,
      active: transparent
    ),
    border: (
      default: transparent,
      hover: transparent,
      active: transparent,
      focus: #237AB3
    ),
    box-shadow: (
      default: none,
      hover: none,
      active: none,
      focus: none
    ),
    text: #3197D6
  ),
) !default;


$seed-button-color-states: (
  #{$seed-button-error-namespace}: (
    background: (
      default: _state(error, border-color),
      hover: darken(_state(error, border-color), 4),
      active: darken(_state(error, border-color), 8)
    ),
    border: (
      default: darken(_state(error, border-color), 8),
      hover: darken(_state(error, border-color), 8),
      active: darken(_state(error, border-color), 8)
    ),
    box-shadow: (
      focus: 0 0 0 1px rgba(white, 0.4) inset
    ),
    text: #fff
  ),
  #{$seed-button-success-namespace}: (
    background: (
      default: _state(success, border-color),
      hover: darken(_state(success, border-color), 4),
      active: darken(_state(success, border-color), 8)
    ),
    border: (
      default: darken(_state(success, border-color), 8),
      hover: darken(_state(success, border-color), 8),
      active: darken(_state(success, border-color), 8)
    ),
    box-shadow: (
      focus: 0 0 0 1px rgba(white, 0.4) inset
    ),
    text: #fff
  ),
  #{$seed-button-warning-namespace}: (
    background: (
      default: _state(warning, border-color),
      hover: darken(_state(warning, border-color), 4),
      active: darken(_state(warning, border-color), 8)
    ),
    border: (
      default: darken(_state(warning, border-color), 8),
      hover: darken(_state(warning, border-color), 8),
      active: darken(_state(warning, border-color), 8)
    ),
    box-shadow: (
      focus: 0 0 0 1px rgba(white, 0.4) inset
    ),
    text: #fff
  )
) !default;

↑Back to top

Help Scout Developers