# Button

### [Interactive demo](https://vision.crimsonlogic.studio/jds/v1.2/components.html#buttons-wrapper)

<div align="left"><img src="https://131633009-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVPzFJV0KiMDuBMGmVD%2F-MZMdQgF-KOenXqKSUW1%2F-MZMdzgHnhqOIeEHVej4%2Fimage.png?alt=media&#x26;token=5b4b2733-ca4c-4765-a294-5297fdfd8958" alt=""></div>

```
<!--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>
```

![](https://131633009-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVPzFJV0KiMDuBMGmVD%2F-MZMX1OaH5EOIDIvLHpN%2F-MZMd9FPV27UT5yZO-wN%2Fimage.png?alt=media\&token=031de075-d2c4-4e2a-883c-c782b91addad)

```html
      <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
