Button elements, links with a button class, and input elements should all render exactly the same.

<button>Button</button>
<input type="submit" value="Submit">
<input type="button" value="Input">
<a class="button">Link</a>

Secondary Buttons

Adding an secondary-button class will display a secondary color.

<button class="secondary-button">Button</button>

Muted Buttons

Adding a muted-button class will create ghost/outline buttons.

<button class="muted-button">Button</button>

Link Styled Buttons

Adding a link-button class to an existing main button or secondary button to create link styled buttons.

<button class="link-button">Button</button>

Inverted Buttons

Adding a inverted class to an existing main button or secondary button to create an inverted styled buttons.

<button class="inverted">Button</button>

In _buttons.scss, you can create new button styles by using the new button style mixin new-button-style ($button-color, $border-color, $background, $states-button-color, $states-border-color, $states-background) . All $states-* variables refer to the various states of the button (:hover, :active, :focus)

&.inverted{ 
 @include new-button-style ($button-background, $button-background, none, white, $button-background, $button-background);
 }

Button Sizes

You can specify diffrent button sizes by adding the related class

<button class="small">Small</button>
<button>Button</button>
<button class="large">Large</button>
<button class="huge">Huge</button>

In _buttons.scss, you can create new button sizes by using the new button size mixin new-button-size ($font-size, $padding) .

&.tiny{
 @include new-button-size (0.73rem, 0.4rem 0.4rem)
 }

Disabled Buttons

Adding a disabled attribute will fade the buttons.

<button disabled >Button</button>

Round Buttons

Adding a round-button class will create rounded buttons.

<button class="round-button">Button</button>

Square Buttons

Adding a square-button class will create square buttons.

<button class="square-button">Button</button>

Full Width Buttons

Adding a full-button class will create full-width, block level buttons. Button styles can be combined.

<button class="full-button">Button</button>

Regular Table

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Status</th>
            <th>Age</th>
            <th>Gender</th>
            <th>Notes</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John</td>
            <td>Approved</td>
            <td>22</td>
            <td>Male</td>
            <td>None</td>
        </tr>
        <tr>
            <td>Jamie</td>
            <td>Approved</td>
            <td>32</td>
            <td>Male</td>
            <td>Requires call</td>
        </tr>
        <tr>
            <td>Jill</td>
            <td>Denied</td>
            <td>22</td>
            <td>Female</td>
            <td>None</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>3 People</th>
            <th>2 Approved</th>
            <th></th>
            <th></th>
            <th></th>
        </tr>
    </tfoot>
</table>

Striped Table

Add a striped-table class for alternating row background colors.

<table class="striped-table">
  <!-- Content here -->
</table>