Structural button styles for SUIT CSS

Downloads in past


52116.0.26 years ago10 years agoMinified + gzip package size for suitcss-components-button in KB


SUIT CSS components-button
Build Status
A SUIT CSS component that provides a structural UI button template to be extended with modifiers.
Read more about SUIT CSS's design principles.


  • npm: npm install suitcss-components-button
  • Download: zip

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 elements. For a elements, you should prevent JavaScript event handlers from firing.

Configurable variables

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


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

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

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:
@import "suitcss-components-button";

 * Modifier: default buttons

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

.Button--default:active, {
  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, {
  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;


Install Node (comes with npm).
npm install

To generate a build:
npm run build

To lint code with postcss-bem-linter and stylelint
npm run lint

To generate the testing build.
npm run build-test

To watch the files for making changes to test:
npm run watch

Basic visual tests are in test/index.html.

Browser support

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