Button component

bower install bits-sass-button


Bits.sass button

Button component.

Read more about Bits.sass toolkit.


  • Bower: bower install --save bits-sass-button
  • Download: zip, tar.gz
  • Git: git clone

Available SASS variables

  • bits-components-ns - components namespace, defaults to 'bits-'

Available classes

  • Button - core button component
  • Button--full - modifier class for full-width buttons
  • is-disabled - for disabled-state button styles (themes)

N.B. You must also include the disabled attribute on button and input elements. For a elements, you should remove the href attribute and prevent JavaScript event handlers from firing.


Like many Bits.sass components, bits-sass-button relies on a base component class that is extended by any number of additional modifier classes.

<a class="Button Button--full" href="[url]">Sign up</a>

<button class="Button is-disabled" type="submit">Submit</button>

<input class="Button is-pressed" type="submit" value="Submit">

Theme HTML classes

The following modifier and state classes should be implemented by all themes. This ensures that themes can hook into a shared set of HTML class names. You're still free to create additional, custom modifier names if your theme requires them.

  • Button--largest (optional) - largest button size
  • Button--large - large button size
  • Button--small - small button size
  • Button--smallest (optional) - smallest button size
  • Button--default - default button style of your theme
  • is-disabled - for disabled-state button styles
  • is-pressed - for pressed-state button styles

N.B. You should try to avoid styling the core Button class directly.


The bits-sass-button component is almost entirely structural. You can rely on a theme or build your application-specific theme styles in your application-level stylesheets. For example:

 * theme/components/_button.scss

 * Modifier: default buttons

.Button--default {
  border-color: #d9d9d9 #d9d9d9 #ccc;
  border-radius: 2px;
  color: #444;
  background-color: #eee;

.Button--default {
  &.is-pressed {
    border-color: #c6c6c6 #c6c6c6 #bbb;
    color: #222;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    background-color: #f5f5f5;

.Button--default:focus {
  border-color: #069;
  outline: 0;

.Button--default {
  &.is-pressed {
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
    background-color: #ccc;

 * Modifier: large buttons

.Button--large {
  font-size: 1.5em;
  padding: 0.75em 1.5em;


  • Sass 3.2+

Browser support

  • Google Chrome (latest)
  • Opera (latest)
  • Firefox 4+
  • Safari 5+
  • Internet Explorer 8+