#### Buttons

Use Kaiadmin Dashboard's custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

Table of Content

- Examples
  1. Style buttons
  2. Sizes
  3. Disabled

#### Examples

Kaiadmin Dashboard has changed the predefined button styles from Bootstrap, each serving its own semantic purpose, with a few extras thrown in for more control.

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

##### Style buttons

                          <button class="btn btn-primary">Default</button>
                          <button class="btn btn-primary btn-border">Border</button>
                          <button class="btn btn-primary btn-round">Round</button>
                          <button class="btn btn-primary btn-border btn-round">Border</button>
                          <button class="btn btn-primary"><span class="btn-label"><i class="flaticon-shapes"></i></span> With Icon</button>
                          <button class="btn btn-primary btn-link">Link</button>

##### Sizes

Fancy larger or smaller buttons? Add `.btn-lg` or `.btn-sm` for additional sizes.

                          <button class="btn btn-primary btn-lg">Large</button>
                          <button class="btn btn-primary">Normal</button>
                          <button class="btn btn-primary btn-sm">Small</button>
                          <button class="btn btn-primary btn-xs">Extra Small</button>

Create block level buttons—those that span the full width of a parent—by adding `.btn-block`.

    								<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
    								<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>

##### Disabled state

Make buttons look inactive by adding the `disabled` boolean attribute to any `<button>` element.

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

Disabled buttons using the `<a>` element behave a bit different:

- `<a>`s don’t support the `disabled` attribute, so you must add the `.disabled` class to make it visually appear disabled.
- Some future-friendly styles are included to disable all `pointer-events` on anchor buttons. In browsers which support that property, you won’t see the disabled cursor at all.

Primary link Link

    								<a href="#" class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
    								<a href="#" class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>