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> |