Buttons

Standard Buttons

States 

<button type="button">
  Default Button
</button>
<!-- Example code for use with text type element -->
<!-- <a class="adb-button" href="/">Default Button</a> -->
<!-- <div role="button">Default Button</div> -->

<button type="button">
  Default Button
</button>
<!-- Example code for use with text type element -->
<!-- <a class="adb-button" href="/">Default Button</a> -->
<!-- <div role="button">Default Button</div> -->

<button type="button">
  Default Button
</button>
<!-- Example code for use with text type element -->
<!-- <a class="adb-button" href="/">Default Button</a> -->
<!-- <div role="button">Default Button</div> -->

<button type="button">
  Default Button
</button>
<!-- Example code for use with text type element -->
<!-- <a class="adb-button" href="/">Default Button</a> -->
<!-- <div role="button">Default Button</div> -->

<button disabled type="button">
  Default Button
</button>

<button class="adb-is-loading" disabled type="button">
  Default Button
  <span class="adb-loading">
    <span class="adb-loading--text">...</span>
  </span>
</button>

Sizes

<button class="adb-button__medium" type="button">
  Medium Button
</button>

<button class="adb-button__small" type="button">
  Small Button
</button>

<button class="adb-button__large" type="button">
  Large Button
</button>

<button class="adb-button__xlarge" type="button">
  X-Large Button
</button>

<button class="adb-button__full_width" type="button">
  Full Width Button
</button>

Colors

Example Class Code
.button 
<button type="button">
  Default Button
</button>
<!-- Example code for use with text type element -->
<!-- <a class="adb-button" href="/">Default Button</a> -->
<!-- <div role="button">Default Button</div> -->
.adb-button__primary 
<button class="adb-button__primary" type="button">
  Primary Button
</button>
.adb-button__secondary 
<button class="adb-button__secondary" type="button">
  Secondary Button
</button>
.adb-button__emphasis 
<button class="adb-button__emphasis" type="button">
  Emphasis Button
</button>

With Icon

Add the `` class to make the icon inside the button display at its optimal size and centered vertically. Descriptive icons paired with text should always on the left side of the text.

<button class="adb-button__primary" type="button">
  <i class="adb-icon__add"></i>
  Add Product
</button>

Inset Buttons

Default Background 

<button class="adb-button__inset" type="button">
  Inset Button
</button>

<button class="adb-button__inset" type="button">
  Inset Button
</button>

<button class="adb-button__inset" type="button">
  Inset Button
</button>

<button class="adb-button__inset" type="button">
  Inset Button
</button>

<button class="adb-button__inset" disabled type="button">
  Inset Button
</button>

<button class="adb-button__inset adb-is-loading" disabled type="button">
  Inset Button
  <span class="adb-loading">
    <span class="adb-loading--text">...</span>
  </span>
</button>

Dark Background 

<button class="adb-button__inset_dark" type="button">
  Inset Button
</button>

<button class="adb-button__inset_dark" type="button">
  Inset Button
</button>

<button class="adb-button__inset_dark" type="button">
  Inset Button
</button>

<button class="adb-button__inset_dark" type="button">
  Inset Button
</button>

<button class="adb-button__inset_dark" disabled type="button">
  Inset Button
</button>

<button class="adb-button__inset_dark adb-is-loading" disabled type="button">
  Inset Button
  <span class="adb-loading">
    <span class="adb-loading--text">...</span>
  </span>
</button>

Sizes

<button class="adb-button__inset" type="button">
  Inset Button
</button>

<button class="adb-button__inset adb-button__small" type="button">
  Inset Button
</button>

Secret Buttons

States 

<button class="adb-button__secret" type="button">
  Secret Button
</button>

<button class="adb-button__secret" type="button">
  Secret Button
</button>

<button class="adb-button__secret" type="button">
  Secret Button
</button>

<button class="adb-button__secret" type="button">
  Secret Button
</button>

<button class="adb-button__secret" disabled type="button">
  Secret Button
</button>

<button class="adb-button__secret adb-is-loading" disabled type="button">
  Secret Button
  <span class="adb-loading">
    <span class="adb-loading--text">...</span>
  </span>
</button>

Sizes

<button class="adb-button__secret" type="button">
  Secret Button
</button>

<button class="adb-button__secret adb-button__small" type="button">
  Secret Button
</button>

Square Buttons

Sizes

<button class="adb-button__square" data-toggle="tooltip" title="Edit" type="button">
  <i class="adb-icon__cog"></i>
</button>

<button class="adb-button__square_small" data-toggle="tooltip" title="Edit" type="button">
  <i class="adb-icon__cog"></i>
</button>

Colors

Example Class Code
.adb-button__square 
<button class="adb-button__square" data-toggle="tooltip" title="Edit" type="button">
  <i class="adb-icon__cog"></i>
</button>
.adb-button__square.adb-button__danger 
<button class="adb-button__square adb-button__danger" data-toggle="tooltip" title="Delete" type="button">
  <i class="adb-icon__trash"></i>
</button>