# Buttons

Buttons follow the same contextual classes as of bootstrap with additional modifiers.

<div align="left"><img src="https://621507229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LMWvbwDSTI9_skSMXwK%2F-LUFRNNCZUQ13jXN9sNI%2F-LUFRhOTVHKzDYR9g806%2Fimage.png?alt=media&#x26;token=86c780a9-3360-4a42-b8f2-ca1108ed8df4" alt=""></div>

```markup
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link ">Link</button>
```

### Rounded Buttons

<div align="left"><img src="https://621507229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LMWvbwDSTI9_skSMXwK%2F-LUFRNNCZUQ13jXN9sNI%2F-LUFRpmtafd6ae1rbQkq%2Fimage.png?alt=media&#x26;token=01fcedad-53e4-4e4a-9f63-d7ccd0cc8671" alt=""></div>

```markup
<button type="button" class="btn btn-primary btn-rounded ">Primary</button>
<button type="button" class="btn btn-secondary btn-rounded ">Secondary</button>
<button type="button" class="btn btn-success btn-rounded ">Success</button>
<button type="button" class="btn btn-danger btn-rounded ">Danger</button>
<button type="button" class="btn btn-warning btn-rounded ">Warning</button>
<button type="button" class="btn btn-info btn-rounded ">Info</button>
<button type="button" class="btn btn-light btn-rounded ">Light</button>
<button type="button" class="btn btn-dark btn-rounded ">Dark</button>
<button type="button" class="btn btn-link  btn-rounded ">Link</button>

```

### Button Badge

badges can be combined with buttons following is an example of badges with soft version of their color you can also use non soft color variation like `badge-primary`

<div align="left"><img src="https://621507229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LMWvbwDSTI9_skSMXwK%2F-LUFRNNCZUQ13jXN9sNI%2F-LUFRyZGsNNZU7N2we7M%2Fimage.png?alt=media&#x26;token=9172c847-1fa6-42af-8898-cec3d53f496b" alt=""></div>

```markup
<button type="button" class="btn badge badge-soft-primary ">Primary</button>
<button type="button" class="btn badge badge-soft-secondary ">Secondary</button>
<button type="button" class="btn badge badge-soft-success ">Success</button>
<button type="button" class="btn badge badge-soft-danger ">Danger</button>
<button type="button" class="btn badge badge-soft-warning ">Warning</button>
<button type="button" class="btn badge badge-soft-info ">Info</button>
<button type="button" class="btn badge badge-soft-light ">Light</button>
<button type="button" class="btn badge badge-soft-dark ">Dark</button>
<button type="button" class="btn badge badge-soft-link  ">Link</button>

```

### Rounded Circle Buttons

<div align="left"><img src="https://621507229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LMWvbwDSTI9_skSMXwK%2F-LUFRNNCZUQ13jXN9sNI%2F-LUFS1iEOfFwRwYaJdVf%2Fimage.png?alt=media&#x26;token=6d552034-f9be-4bfc-b8c7-046b9c7487a1" alt=""></div>

```markup
<button type="button" class="btn btn-rounded-circle btn-primary ">Primary</button>
<button type="button" class="btn btn-rounded-circle btn-secondary ">Secondary</button>
<button type="button" class="btn btn-rounded-circle btn-success ">Success</button>
<button type="button" class="btn btn-rounded-circle btn-danger ">Danger</button>
<button type="button" class="btn btn-rounded-circle btn-warning ">Warning</button>
<button type="button" class="btn btn-rounded-circle btn-info ">Info</button>
<button type="button" class="btn btn-rounded-circle btn-light ">Light</button>
<button type="button" class="btn btn-rounded-circle btn-dark ">Dark</button>
<button type="button" class="btn btn-rounded-circle btn-link  ">Link</button>
```