Buttons

Sass module for buttons used in RightScale apps

Source
Version
Updated
7/30/2017

Install

npm install designkit-buttons --save

Dependencies

Examples

Default Button Skin

Buttons are used as triggers for actions. They are used in forms, cards, dialog footers and as stand-alone action triggers.

HTML

<button class="btn btn-default" type="button">Button</button>

<a href="#" class="btn btn-default">Button Link</a>

Example

Primary Skin

HTML

<button class="btn btn-primary" type="button">Button</button>

<a href="#" class="btn btn-primary">Button Link</a>

Example

Success Skin

HTML

<button class="btn btn-success" type="button">Button</button>

<a href="#" class="btn btn-success">Button Link</a>

Example

Danger Skin

HTML

<button class="btn btn-danger" type="button">Button</button>

<a href="#" class="btn btn-danger">Button Link</a>

Example

Size Options

HTML

<button class="btn btn-sm btn-default" type="button">Button</button>

<button class="btn btn-lg btn-default" type="button">Button</button>

Example

Button Groups

HTML

<div class="btn-group">
  <button class="btn btn-default" type="button">Button One</button>
  <button class="btn btn-default" type="button">Button Two</button>
  <button class="btn btn-default" type="button">Button Three</button>
</div>

Example

CSS