# Buttons

### Markup

    <a class="btn" href="">Link</a>

    <button class="btn" type="submit">Button</button>

    <input class="btn" type="button" value="Input">

    <input class="btn" type="submit" value="Submit">

### Semantic Buttons

Button | class="" | Description
--- | --- | ---
| `btn` | Standard gray button with gradient
| `btn btn-primary` | Provides extra visual weight and identifies the primary action in a set of buttons
| `btn btn-secondary` | Provides extra visual weight and identifies the secondary action in a set of buttons
| `btn btn-tertiary` | Provides extra visual weight and identifies the tertiary action in a set of buttons
| `btn btn-info` | Used as an alternative to the default styles
| `btn btn-success` | Indicates a successful or positive action
| `btn btn-warning` | Indicates caution should be taken with this action
| `btn btn-danger` | Indicates a dangerous or potentially negative action
| `btn btn-inverse` | Alternate dark gray button, not tied to a semantic action or use

### Button Sizes

- `.btn-large`
- `.btn`
- `.btn-small`
- `.btn-mini`

### Disabled State

For disabled buttons, add the `.disabled` class to links and the `disabled` attribute for `<button>` elements.

### Dropdown Markup

    <div class="btn-group">
      <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
        Action
        <span class="caret"></span>
      </a>
      <ul class="dropdown-menu">
        <!-- dropdown menu links -->
      </ul>
    </div>

### Split Button Markup

    <div class="btn-group">
      <button class="btn">Action</button>
      <button class="btn dropdown-toggle" data-toggle="dropdown">
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu">
        <!-- dropdown menu links -->
      </ul>
    </div>