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>

      <h3 class="mb-3">Types</h3>
      <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>
      <h3 class="mb-3 mt-5">Variants</h3>
      <button type="button" class="btn btn-primary"><i class="fal fa-list-alt me-2"></i>Icon left</button>
      <button type="button" class="btn btn-primary">Icon right<i class="fal fa-list-alt ms-2"></i></button>
      <button type="button" class="btn btn-link"><i class="fal fa-list-alt me-2"></i>Text</button>
      <button type="button" class="btn icon-only"><i class="fal fa-list-alt"></i></button>
      <h3 class="mb-3 mt-5">States</h3>
      <button type="button" class="btn btn-primary">Default</button>
      <button type="button" class="btn btn-secondary">Hover</button>
      <button type="button" disabled class="btn btn-primary">Disabled</button>
      <h3 class="mb-3 mt-5">Colours</h3>
      <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>
      <h3 class="mb-3 mt-5">Colours Outline</h3>
      <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>
      <h3 class="mb-3 mt-5">Button Sizes</h3>
      <button type="button" class="btn btn-primary btn-small">Small</button>
      <button type="button" class="btn btn-primary">Default</button>
      <button type="button" class="btn btn-primary btn-large">Large</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