# SUIT CSS components-button
A SUIT CSS component that provides a structural UI button template to be
extended with modifiers.
Read more about [SUIT CSS's design principles](https://github.com/suitcss/suit/).
## Installation
* [npm](http://npmjs.org/): `npm install suitcss-components-button`
* [Component(1)](https://github.com/component/component/): `component install suitcss/components-button`
* [Bower](http://bower.io/): `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
* `--Button-border-width`
* `--Button-border-color`
* `--Button-color`
* `--Button-font`
* `--Button-padding`
* `--Button-disabled-opacity`
## Use
Examples:
```html
Sign up
```
### 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:
```css
@import "suitcss-components-button";
/**
* Modifier: default buttons
*/
.Button--default {
background-color: #eee;
color: #444;
border-color: #d9d9d9 #d9d9d9 #ccc;
border-radius: 2px;
}
.Button--default:hover,
.Button--default:focus,
.Button--default:active,
.Button--default.is-pressed {
background-color: #f5f5f5;
color: #222;
border-color: #c6c6c6 #c6c6c6 #bbb;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.Button--default:focus {
border-color: #069;
outline: 0;
}
.Button--default:active,
.Button--default.is-pressed {
background-color: #ccc;
box-shadow: inset 0 1px 2px rgba(0,0,0, 0.2);
}
/**
* Modifier: large buttons
*/
.Button--large {
font-size: 1.5em;
padding: 0.75em 1.5em;
}
```
## Testing
Install [Node](http://nodejs.org) (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/index.html`.
## Browser support
* Google Chrome
* Firefox
* Opera
* Safari
* Internet Explorer 8+