- Brand
- Forms
- Buttons
  - Button tags
  - Options
  - Sizes
  - Active State
  - Disabled State
  - Loading State
  - Group
  - Nesting
  - Radio
- Utilities
- Components
- Compositions
- Ember Addon

### Button tags

Use the button classes on an `<a>`, `<button>`, or `<input>` element.

#### Context-specific usage

While button classes can be used on `<a>` and `<button>` elements, only `<button>` elements are supported within our nav and navbar components.

Link

    <a class="btn btn-secondary" href="#" role="button">Link</a>
    <button class="btn btn-secondary" type="submit">Button</button>
    <input class="btn btn-secondary" type="button" value="Input">
    <input class="btn btn-secondary" type="submit" value="Submit">

### Options

Use any of the available button classes to quickly create a styled button.

    <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
    <button type="button" class="btn btn-primary">Primary</button>

    <!-- Secondary, outline button -->
    <button type="button" class="btn btn-secondary">Secondary</button>
    <!-- DEPRECATED, kept for Bootstap 3.x support: Standard button -->
    <button type="button" class="btn btn-default">Default</button>

    <!-- Secondary inverse -->
    <button class="btn btn-secondary-inverse btn-round" type="button">
      <span>&times;</span>
    </button>

    <!-- Indicates a dangerous or potentially negative action -->
    <button type="button" class="btn btn-danger">Danger</button>

    <!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
    <button type="button" class="btn btn-link">Link</button>

### Sizes

Need smaller buttons? Add `.btn-sm` for additional sizes.

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

### Active State

For `<button>` elements, this is done via `:active`. For `<a>` elements, it's done with `.active`. However, you may use `.active` on `<button>`s (and include the `aria-pressed="true"` attribute) should you need to replicate the active state programmatically.

Primary link Link

    <button type="button" class="btn btn-primary active">Primary button</button>
    <button type="button" class="btn btn-secondary active">Button</button>
    <a href="#" class="btn btn-primary active" role="button">Primary link</a>
    <a href="#" class="btn btn-secondary active" role="button">Link</a>

### Disabled State

For `<button>` elements, this is done via `disabled` attribute or `.disabled` class. It's also possible to disable buttons from a parent disabled fieldset.

Primary link Link

Primary link Link

Primary link Link

    <button type="button" class="btn btn-primary disabled">Primary button</button>
    <button type="button" class="btn btn-secondary disabled">Button</button>
    <a href="#" class="btn btn-primary disabled" role="button">Primary link</a>
    <a href="#" class="btn btn-secondary disabled" role="button">Link</a>

    <hr>

    <button type="button" class="btn btn-primary" disabled>Primary button</button>
    <button type="button" class="btn btn-secondary" disabled>Button</button>
    <a href="#" class="btn btn-primary" disabled role="button">Primary link</a>
    <a href="#" class="btn btn-secondary" disabled role="button">Link</a>

    <hr>

    <form>
      <fieldset disabled>
        <button type="button" class="btn btn-primary">Primary button</button>
        <button type="button" class="btn btn-secondary">Button</button>
        <a href="#" class="btn btn-primary" role="button">Primary link</a>
        <a href="#" class="btn btn-secondary" role="button">Link</a>
      </fieldset>
    </form>

### Loading State

This is done via `.btn-loading` and it's good practice to add `disabled` attribute as well.

Loading... Loading...

Loading... Loading...

    <button type="button" class="btn btn-primary btn-loading" disabled>Loading...</button>
    <button type="button" class="btn btn-secondary btn-loading" disabled>Loading...</button>
    <a href="#" class="btn btn-primary btn-loading" role="button" disabled>Loading...</a>
    <a href="#" class="btn btn-secondary btn-loading" role="button" disabled>Loading...</a>
    <button type="button" class="btn btn-secondary-inverse btn-round btn-loading" disabled>
      <span>&times;</span>
    </button>

    <hr>

    <button type="button" class="btn btn-sm btn-primary btn-loading" disabled>Loading...</button>
    <button type="button" class="btn btn-sm btn-secondary btn-loading" disabled>Loading...</button>
    <a href="#" class="btn btn-sm btn-primary btn-loading" role="button" disabled>Loading...</a>
    <a href="#" class="btn btn-sm btn-secondary btn-loading" role="button" disabled>Loading...</a>
    <button type="button" class="btn btn-sm btn-secondary-inverse btn-round btn-loading" disabled>
      <span>&times;</span>
    </button>

### Group

Wrap a series of buttons with `.btn` in `.btn-group`.

    <div class="btn-group" role="group" aria-label="...">
      <button type="button" class="btn btn-secondary">Left</button>
      <button type="button" class="btn btn-secondary">Middle</button>
      <button type="button" class="btn btn-secondary">Right</button>
    </div>

### Nesting

Place a .btn-group within another `.btn-group` when you want dropdown menus mixed with a series of buttons.

    <div class="btn-group" role="group" aria-label="...">
      <button type="button" class="btn btn-secondary">1</button>
      <button type="button" class="btn btn-secondary">2</button>

      <div class="btn-group" role="group">
        <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
          <li><a href="#">Dropdown link</a></li>
          <li><a href="#">Dropdown link</a></li>
        </ul>
      </div>
    </div>

### Radio

Radio 1 (preselected) Radio 2 Radio 3

    <div class="btn-group" role="group" aria-label="...">
      <div class="btn-group" data-toggle="buttons">
        <label class="btn btn-secondary active">
          <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
        </label>
        <label class="btn btn-secondary">
          <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
        </label>
        <label class="btn btn-secondary">
          <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
        </label>
      </div>
    </div>