This repository is a mirror of the component module suitcss/components-button. It has been modified to work with NPM+Browserify. You can install it using the command npm install npmcomponent/suitcss-components-button. Please do not open issues or send pull requests against this repo. If you have issues with this repo, report it to npmcomponent.

SUIT components-button

A SUIT component that provides a structural UI button template to be extended with modifiers.

Read more about SUIT's design principles.

Installation

• Component(1): component install suitcss/components-button
• npm: npm install suitcss-components-button
• Bower: bower install suit-components-button

Available classes

• Button - [core] The core button component
• is-disabled - [state] 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.

Configurable variables

• var-border-width-Button
• var-border-color-Button
• var-color-Button
• var-font-Button
• var-padding-Button
• var-opacity-Button-disabled

Use

Examples:

<a class="Button" href="{{url}}">Sign up</a>

<button class="Button Button--default is-disabled" type="button">Close</button>

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

Theming / extending

The CSS is focused on common structural requirements for buttons. You can build your application-specific theme styles in your app. For example:

/**
 * Modifier: default buttons
 */

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

.Button--default:hover,
.Button--default:focus,
.Button--default:active,
.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:active,
.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;
}

Testing

Install Node (comes with npm).

npm install

To generate a build:

npm run build

To generate the testing build.

npm run build-test

Basic visual tests are in test.html.

Browser support

• Google Chrome
• Firefox
• Opera
• Safari
• Internet Explorer 8+