Button

Buttons are clickable items used to perform an action.

Interactive demo

<!--Types-->
<button type="button" class="btn btn-primary">Default</button>
<button type="button" class="btn btn-outline">Outlined</button>
<button type="button" class="btn btn-link">Link</button>

<!--Variants-->
 <button type="button" class="btn btn-primary"><i class="fal fa-list-alt mr-2"></i>Icon left</button>
<button type="button" class="btn btn-link"><i class="fal fa-list-alt mr-2"></i>Text</button>
<button type="button" class="btn icon-only"><i class="fal fa-list-alt"></i></button>

<!--Normal-->
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-tertiary">Tertiary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-error">Error</button>
<button type="button" class="btn btn-example">Example</button>

<!--Outline-->
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-tertiary">Tertiary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-error">Error</button>
<button type="button" class="btn btn-outline-example">Example</button>

When to be used

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