Buttons

To use this module, follow the instructions in the README. (For background on PXd, read the Getting Started documentation.)

px-buttons-design

How to Use

Install via command line:


          bower install --save https://github.com/PredixDev/px-buttons-design.git

Add to component Sass file:


          @import "px-buttons-design/_objects.buttons.scss";

Small

Sass Flag


          $inuit-enable-btn--small : true;

Flag must be set before @import in component Sass file.

HTML


          <button class="btn btn--small btn--primary">…</button>
          

          <button class="btn btn--small">…</button>
          

          <button class="btn btn--small btn--tertiary">…</button>
          

          <button class="btn btn--small btn--disabled">…</button>

Note: Icon buttons should not be used at the small button size.

Regular

Sass Flags

To enable Primary, Tertiary, Disabled, or Icon buttons, the following Sass flags are required:

Primary


          $inuit-enable-btn--primary : true;

Flag must be set before @import in component Sass file.

Tertiary


          $inuit-enable-btn--tertiary : true;

Flag must be set before @import in component Sass file.

Disabled


          $inuit-enable-btn--primary : true;

Flag must be set before @import in component Sass file.

Icon


          $inuit-enable-btn--icon : true;

Flag must be set before @import in component Sass file.


          <button class="btn btn--primary">…</button>
          

          <button class="btn">…</button>
          

          <button class="btn btn--tertiary">…</button>
          

          <button class="btn btn--disabled">…</button>
          

          <button class="btn btn--tertiary btn--icon">
          

            <i class="fa fa-…"></i>
          

          </button>
          

          <button class="btn btn--tertiary btn--icon">
          

            <i class="fa fa-…"></i>
          

          </button>
          

          <button class="btn btn--disabled btn--icon">
          

            <i class="fa fa-…"></i>
          

          </button>

Large

Sass Flag


          $inuit-enable-btn--large : true;

Flag must be set before @import in component Sass file.

HTML


          <button class="btn btn--large btn--primary">…</button>
          

          <button class="btn btn--large">…</button>
          

          <button class="btn btn--large btn--tertiary">…</button>
          

          <button class="btn btn--large btn--disabled">…</button>
          

          <button class="btn btn--large btn--tertiary btn--icon">
          

            <i class="fa fa-…"></i>
          

          </button>
          

          <button class="btn btn--large btn--tertiary btn--icon">
          

            <i class="fa fa-…"></i>
          

          </button>
          

          <button class="btn btn--large btn--disabled btn--icon">
          

            <i class="fa fa-…"></i>
          

          </button>

Huge

Sass Flag


          $inuit-enable-btn--huge : true;

Flag must be set before @import in component Sass file.

HTML


          <button class="btn btn--huge btn--primary">…</button>
          

          <button class="btn btn--huge">…</button>
          

          <button class="btn btn--huge btn--tertiary">…</button>
          

          <button class="btn btn--huge btn--disabled">…</button>
          

          <button class="btn btn--huge btn--tertiary btn--icon">
          

            <i class="fa fa-…"></i>
          

          </button>
          

          <button class="btn btn--huge btn--tertiary btn--icon">
          

            <i class="fa fa-…"></i>
          

          </button>
          

          <button class="btn btn--huge btn--disabled btn--icon">
          

            <i class="fa fa-…"></i>
          

          </button>

Button with Text & Icon


          <button class=btn>
          

            <i class="fa fa-… mr--"></i>
          

            …
          

          </button>

Button with No Styles

Sass Flag


          $inuit-enable-btn--bare : true;

Flag must be set before @import in component Sass file.

HTML


          <button class="btn btn--bare">
          

            <i class="fa fa-…"></i>
          

          </button>

Text as Button & Icon as button

Sass Flags

To enable Primary, Tertiary, Disabled, or Icon buttons, the following Sass flags are required:

Primary


          $inuit-enable-btn--bare-primary : true;

Flag must be set before @import in component Sass file.

Selected


          $inuit-enable-btn--bare-select : true;

Flag must be set before @import in component Sass file.

Disabled


          $inuit-enable-btn--bare-disabled : true;

Flag must be set before @import in component Sass file.


          <button class="btn btn--bare-primary">…</button>
          

          <button class="btn btn--bare-select">…</button>
          

          <button class="btn btn--bare-disabled">…</button>
          

          

          <button class="btn btn--bare-primary">
          

            <i class="fa fa-…"></i>
          

          </button>
          

          <button class="btn btn--bare-select">
          

            <i class="fa fa-…"></i>
          

          </button>
          

          <button class="btn btn--bare-disabled">
          

            <i class="fa fa-…"></i>
          

          </button>

Support for non-button elements


          <div class="btn">…</div>
          

          <span class="btn">…</span>
          

          <a class="btn">…</a>

div

span anchor