Bits.sass button
Button component.
Read more about Bits.sass toolkit.
Installation
-
Bower:
bower install --save bits-sass-button
- Download: zip, tar.gz
-
Git:
git clone https://github.com/bits-sass/button.git
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.
Usage
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.
Theming
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 {
&:hover,
&:focus,
&:active,
&.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,
&.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;
}
Requirements
- Sass 3.2+
Browser support
- Google Chrome (latest)
- Opera (latest)
- Firefox 4+
- Safari 5+
- Internet Explorer 8+