Components

## Buttons

Documentation and examples of button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

##### Example with Variations

Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.

- Primary Primary
- Secondary Secondary
- Success Success
- Danger Danger
- Warning Warning
- Info Info
- Light Light
- Dark Dark

###### Code Example

    <a href="#" class="btn btn-primary">Primary</a>

- Primary Primary
- Secondary Secondary
- Success Success
- Danger Danger
- Warning Warning
- Info Info
- Light Light
- Dark Dark

###### Code Example

    <a href="#" class="btn btn-dim btn-primary">Primary</a>

- Primary Primary
- Secondary Secondary
- Success Success
- Danger Danger
- Warning Warning
- Info Info
- Light Light
- Dark Dark

###### Code Example

    <a href="#" class="btn btn-outline-primary">Primary</a>

- Primary Primary
- Secondary Secondary
- Success Success
- Danger Danger
- Warning Warning
- Info Info
- Light Light
- Dark Dark

###### Code Example

    <a href="#" class="btn btn-dim btn-outline-primary">Primary</a>

- Button Extra Large Button Large
- Button Large Button Regular
- Button Regular Button Regular
- Button Small Button Small

###### Code Example

    <a href="#" class="btn btn-xl btn-primary">Button Large</a>

- Button Extra Large Button Large
- Button Large Button Regular
- Button Regular Button Regular
- Button Small Button Small

###### Code Example

    <a href="#" class="btn btn-xl btn-primary">Button Large</a>

- Left Icon Button Left Icon
- Right Icon Button Right Icon
- Action Button
  Action Button

###### Code Example

    <a href="#" class="btn btn-round btn-lg btn-primary">Button Large</a>
    <a href="#" class="btn btn-round btn-primary">Button Regular</a>
    <a href="#" class="btn btn-round btn-primary"><em class="icon ni ni-setting"></em><span>Button Regular</span> </a>
    <a href="#" class="btn btn-round btn-primary"><span>Button Regular</span><em class="icon ni ni-chevron-down"></em></a>
    <a href="#" class="btn btn-round btn-primary btn-action"><span>Button Regular</span><em class="icon ni ni-chevron-down"></em></a>
    <a href="#" class="btn btn-round btn-sm btn-primary">Button Small</a>

- Left Icon Button Left Icon
- Right Icon Button Right Icon
- Action Button
  Action Button
- Icon on Right Action Button

###### Code Example

    <a href="#" class="btn btn-primary"><em class="icon ni ni-setting"></em><span>Button Regular</span> </a>
    <a href="#" class="btn btn-primary"><span>Button Regular</span><em class="icon ni ni-chevron-down"></em></a>
    <a href="#" class="btn btn-primary btn-action"><span>Button Regular</span><em class="icon ni ni-chevron-down"></em></a>

- lg
- Rg
- Sm
- lg
- Rg
- Sm

###### Code Example

    <a href="#" class="btn btn-icon btn-lg btn-primary"><em class="icon ni ni-play"></em></a>