Base by AppDirect

Navigate

Guide users through the application

Buttons

Standard Buttons

States

Link as a button 
<div class="container" style="padding-bottom: 8px;">
  <button type="button">
    Default Button
  </button>
</div>
<div class="container">
  <a class="adb-button adb-button__medium adb-button__neutral">
    Link as a button
  </a>
</div>
Link as a button 
<div class="container" style="padding-bottom: 8px;">
  <button type="button">
    Default Button
  </button>
</div>
<div class="container">
  <a class="adb-button adb-button__medium adb-button__neutral">
    Link as a button
  </a>
</div>
Link as a button 
<div class="container" style="padding-bottom: 8px;">
  <button type="button">
    Default Button
  </button>
</div>
<div class="container">
  <a class="adb-button adb-button__medium adb-button__neutral">
    Link as a button
  </a>
</div>
Link as a button 
<div class="container" style="padding-bottom: 8px;">
  <button type="button">
    Default Button
  </button>
</div>
<div class="container">
  <a class="adb-button adb-button__medium adb-button__neutral">
    Link as a button
  </a>
</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__small" type="button">
  Small Button
</button>

<button class="adb-button__medium" type="button">
  Medium 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
Link as a button
type="button" .adb-button 
<div class="container" style="padding-bottom: 8px;">
  <button type="button">
    Default Button
  </button>
</div>
<div class="container">
  <a class="adb-button adb-button__medium adb-button__neutral">
    Link as a button
  </a>
</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 adb-icon__icon_name 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>

Insetted Primary Header Button 

<button class="adb-button__inset_header__primary" type="button">
  Inset button Primary Header
</button>

<button class="adb-button__inset_header__primary" type="button">
  Inset button Primary Header
</button>

<button class="adb-button__inset_header__primary" type="button">
  Inset button Primary Header
</button>

<button class="adb-button__inset_header__primary" type="button">
  Inset button Primary Header
</button>

<button class="adb-button__inset_header__primary" disabled type="button">
  Inset button Primary Header
</button>

<button class="adb-button__inset_header__primary adb-is-loading" disabled type="button">
  Inset button Primary Header
  <span class="adb-loading">
    <span class="adb-loading--text">...</span>
  </span>
</button>

The Insetted Primary Header Button is a specialty button for the Primary Navigation.

The button should be placed as a primary button that will always display the main $adb-header-primary-background color and uses the $adb-header-primary-text-color for the inset border color and text color. This setup ensures that the button will be visible at the primary navigation in combination with any theme-based contrast & color variations.

Sizes

<button class="adb-button__inset_header__primary adb-button__small" disabled type="button">
  Inset button Primary Header
</button>

<button class="adb-button__inset_header__primary" type="button">
  Inset button Primary Header
</button>

<button class="adb-button__inset_header__primary adb-button__large" disabled type="button">
  Inset button Primary Header
</button>

<button class="adb-button__inset_header__primary adb-button__xlarge" disabled type="button">
  Inset button Primary Header
</button>

<button class="adb-button__inset_header__primary adb-button__full_width" disabled type="button">
  Inset button Primary Header
</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 adb-button__small" type="button">
  Secret Button
</button>

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

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

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

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

Link Buttons

Link Buttons provide a larger click and touch area than traditional links and inherit all classic buttons states and padding without a fading background effect of Secret Buttons.

States

Sizes

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>