Button
Buttons are clickable items used to perform an action.

## Usage

Buttons should be used in situations where users might need to:

- submit a form
- begin a new task
- trigger a new UI element to appear on the page
- specify a new or next step in a process

Link Button
draft

    <button type="button" class="btn btn-link">Link Button</button>

Neutral Button
draft

    <button type="button" class="btn btn-outline-secondary">Neutral Button</button>

Outline Primary Button
draft

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

Link, Neutral, and Outline Primary buttons can be used multiple times per feature. Use these buttons when the actions are of equal or secondary importance to the content surrounding it.

Primary Button
draft
Use for primary action of a component screen

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

The Primary button generally should only be used once per component screen at any one time. It is used for when there is an action that is clearly more important than the other actions and you need to draw attention to it. An example is when you have a “Save” and “Cancel” button. The “Save” is the primary action.

Not all features need to have primary actions, sometimes the actions are secondary to the content and are all of equal importance.

Block Button
draft
Use block buttons on small self-service containers (eg. 'Sign in').

    <button type="button" class="btn btn-primary btn-block">Block Button</button>

Inverse Button
draft
Use the inverse button on dark backgrounds.

    <div class="bg-dark p-4">
      <button type="button" class="btn btn-outline-light">Inverse Button</button>
    </div>

Destructive Button
draft
Use the destructive button to indicate a destructive action to the user, like permanently erasing data.

    <button type="button" class="btn btn-danger">Destructive Button</button>

Outline Destructive Button
draft
Use this version when the Destructive button would be too distracting to the experience.

    <button type="button" class="btn btn-outline-danger">Outline Destructive Button</button>

Disabled Button
draft

    <button type="button" class="btn btn-link" disabled>Link Button</button>
    <button type="button" class="btn btn-outline-secondary" disabled>Neutral Button</button>
    <button type="button" class="btn btn-outline-primary" disabled>Outline Primary Button</button>
    <button type="button" class="btn btn-primary" disabled>Primary Button</button>
    <button type="button" class="btn btn-danger" disabled>Destructive Button</button>
    <button type="button" class="btn btn-outline-danger" disabled>Outline Destructive Button</button>

Icon Button
draft
Use icon buttons to reinforce button action (eg. '+ New').

    <button type="button" class="btn btn-outline-secondary"><i class="material-icons material-icons-outlined mr-2">add</i>Icon Button</button>

Icon-only Button
draft
Use icon-only buttons in toolbars for secondary actions.

    <button type="button" class="btn btn-outline-secondary"><i class="material-icons material-icons-outlined">copy</i></button>

Loading Button State
draft
Use loading button state to indicate an action is currently processing or taking place.

    <button class="btn btn-primary" type="button" disabled>
      <span class="spinner-border spinner-border-sm mr-2" role="status" aria-hidden="true"></span>
      Loading...
    </button>

Checkbox Button
draft
Use checkbox buttons to bring emphasis to selection items.

    <div class="btn-group-toggle d-inline-block" data-toggle="buttons">
      <label class="btn btn-outline-secondary">
        <input type="checkbox" autocomplete="off">Not Checked
      </label>
    </div>
    <div class="btn-group-toggle d-inline-block" data-toggle="buttons">
      <label class="btn btn-outline-secondary active">
        <input type="checkbox" checked autocomplete="off">Checked
      </label>
    </div>