# Bootstrap Buttons

Use Bootstrap buttons and Bootstrap custom styles for actions in forms, dialogues, and more with support for multiple sizes, states, and more.

## Classes

Bootstrap provides different styles of buttons:

- `.btn`
- `.btn-default`
- `.btn-primary`
- `.btn-success`
- `.btn-info`
- `.btn-warning`
- `.btn-danger`
- `.btn-link`
- `.btn-outline-default`
- `.btn-outline-primary`
- `.btn-outline-success`
- `.btn-outline-info`
- `.btn-outline-warning`
- `.btn-outline-danger`

## Examples

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

Copy

    <button class="btn btn-primary" type="button">Button</button>

    <button class="btn btn-icon btn-3 btn-primary" type="button">
    	<span class="btn-inner--icon"><i class="material-icons">play_arrow</i></span>
      <span class="btn-inner--text">With icon</span>
    </button>

    <button class="btn btn-icon btn-2 btn-primary" type="button">
    	<span class="btn-inner--icon"><i class="material-icons">lightbulb</i></span>
    </button>

Copy

    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-secondary">Secondary</button>
    <button type="button" class="btn btn-info">Info</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>

Copy

    <button type="button" class="btn bg-gradient-primary">Primary</button>
    <button type="button" class="btn bg-gradient-secondary">Secondary</button>
    <button type="button" class="btn bg-gradient-info">Info</button>
    <button type="button" class="btn bg-gradient-success">Success</button>
    <button type="button" class="btn bg-gradient-danger">Danger</button>
    <button type="button" class="btn bg-gradient-warning">Warning</button>

## Outline buttons

In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the `.btn-outline-*` ones to remove all background images and colors on any button.

Copy

    <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-info">Info</button>
    <button type="button" class="btn btn-outline-success">Success</button>
    <button type="button" class="btn btn-outline-danger">Danger</button>
    <button type="button" class="btn btn-outline-warning">Warning</button>

## Sizes

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

Copy

    <button type="button" class="btn btn-primary btn-lg">Large button</button>
    <button type="button" class="btn btn-secondary btn-lg">Large button</button>

Copy

    <button type="button" class="btn btn-primary btn-sm">Small button</button>
    <button type="button" class="btn btn-secondary btn-sm">Small button</button>

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

Copy

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

## Active state

Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. There’s no need to add a class to `<button>`s as they use a pseudo-class. However, you can still force the same active appearance with `.active` (and include the `aria-pressed="true"` attribute) should you need to replicate the state programmatically.

Primary link Link
Copy

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

## Disabled state

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

Copy

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