kengai

Buttons

Action Buttons

<button class="btn btn-primary">Primary Button</button>

Buttons that create, edit, or delete information.

<button class="btn {{modifier_class}}">{{modifier_class}}</button>

Non-action buttons

Buttons that route to new pages, open modals - their action doesn't "do" anything.

<button class="btn {{modifier_class}}">{{modifier_class}}</button>

Button States

To disable a button, add class disabled; for loading, add loading

<button class="btn {{modifier_class}}">{{modifier_class}}</button>

Button Colors

For when you need to pass contrast tests and the standard action and non-action buttons don't make the cut.

<button class="btn {{modifier_class}}">{{modifier_class}}</button>

Button Sizes

There are two button sizes. Add btn-sm or btn-lg to decrease or increase the standard size. Add btn-block to a btn element to expand the button to fill its parent.

<button class="btn {{modifier_class}}">{{modifier_class}}</button>

Button groups

<div class="btn-group">
  <button class="btn">1</button>
  <button class="btn">2</button>
  <button class="btn">3</button>
</div>

Tables

Name	Status	Created	Actions
item	item	item	item
item	item	item	item
item	item	item	item

<table class="table">
  <thead>
    <th>Name</th>
    <th>Status</th>
    <th>Created</th>
    <th>Actions</th>
  </thead>
  <tr>
    <td>item</td>
    <td>item</td>
    <td>item</td>
    <td>item</td>
  </tr>
  <tr>
    <td>item</td>
    <td>item</td>
    <td>item</td>
    <td>item</td>
  </tr>
  <tr>
    <td>item</td>
    <td>item</td>
    <td>item</td>
    <td>item</td>
  </tr>
</table>

Striped Tables

Name	Status	Created	Actions
item	item	item	item
item	item	item	item
item	item	item	item

<table class="table table-striped">
  <thead>
    <th>Name</th>
    <th>Status</th>
    <th>Created</th>
    <th>Actions</th>
  </thead>
  <tr>
    <td>item</td>
    <td>item</td>
    <td>item</td>
    <td>item</td>
  </tr>
  <tr>
    <td>item</td>
    <td>item</td>
    <td>item</td>
    <td>item</td>
  </tr>
  <tr>
    <td>item</td>
    <td>item</td>
    <td>item</td>
    <td>item</td>
  </tr>
</table>

Table with hover

Name	Status	Created	Actions
item	item	item	item
item	item	item	item
item	item	item	item

<table class="table table-hover">
  <thead>
    <th>Name</th>
    <th>Status</th>
    <th>Created</th>
    <th>Actions</th>
  </thead>
  <tr>
    <td>item</td>
    <td>item</td>
    <td>item</td>
    <td>item</td>
  </tr>
  <tr>
    <td>item</td>
    <td>item</td>
    <td>item</td>
    <td>item</td>
  </tr>
  <tr>
    <td>item</td>
    <td>item</td>
    <td>item</td>
    <td>item</td>
  </tr>
</table>