Skip to main content

Buttons

Buttons are used as triggers for actions. Depending on the use case, buttons contain a label and/or an icon. There are a variety of styles, sizes, and variations that can be used for different situations.

All button labels are sentence case. They should be as short as possible while clearly explaining what will happen when the button is clicked.

Button styles

There are 8 button styles:

  • Primary, indicates the critical, or most important action on a form/page.
  • Secondary, the general button style.
  • Success, indicates a positive action.
  • Danger, indicates a dangerous, generally destructive action, such as deleting.
  • Info, indicates a informative action.
  • Warning, indicates an action that may have some side effects, such as giving a user admin access.
  • Light, the general button style for dark background.
  • Link, used for non-critical actions. Useful for keeping the interface simple.

All buttons are prefixed with the btn class. The btn class can be applied to any element. Try to use <button> elements when an action won’t change the URL/route, and <a> elements when the action will change the URL/route.

Buttons

Example HTML usage: 
<!--Button styles-->
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</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-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>

Outline Buttons

Example HTML usage: 
<!--Button styles-->
<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-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
<div class="p-2 mt-3 bg-dark">
  <button type="button" class="btn btn-outline-light">Light</button>
  <button type="button" class="btn btn-outline-light" disabled="">
    Disabled
  </button>
</div>

Disabled state

Inactive states of UI elements, including buttons, are not required to meet accessible contrast requirements. See WCAG 2.1 Section 1.4.11

Example

Example HTML usage: 
<!--Button disabled states-->
<button type="button" class="btn btn-primary" disabled>Button</button>
<button type="button" class="btn btn-outline-info" disabled="">Disabled</button>
<button type="button" class="btn btn-link" disabled>Link</button>

Button sizes

There are 3 different button sizes:

  • Large, use the btn-lg class.
  • Normal, no extra classes necessary.
  • Small, use the btn-sm class.

Example

Example HTML usage: 
<button type="button" class="btn btn-lg btn-primary">Button</button>
<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-sm btn-primary">Button</button>

Block level buttons

Use the btn-block class for buttons that fill the width of their container. These are useful for narrow containers and cleaning up alignment.

Example

Example HTML usage: 
<div>
  <button type="button" class="btn btn-primary btn-block">Block level</button>
</div>
<div class="mt-2">
  <button type="button" class="btn btn-secondary btn-block">Block level</button>
</div>

Button groups

Related buttons can be grouped together to show associations and improve clarity. Button groups can be sized using the btn-group-lg, and btn-group-sm.

Example

Example HTML usage: 
<div class="btn-group" role="group" aria-label="Button group example">
  <button type="button" class="btn btn-primary">Left</button>
  <button type="button" class="btn btn-outline-primary">Middle</button>
  <button type="button" class="btn btn-outline-primary">Right</button>
</div>
<div class="btn-group" role="group" aria-label="Button group example">
  <button type="button" class="btn btn-secondary active">Left</button>
  <button type="button" class="btn btn-secondary">Middle</button>
  <button type="button" class="btn btn-secondary">Right</button>
</div>

Toggle buttons

Similar to a checkbox, toggle buttons can be toggled between active or not active.

Add the active class and the aria-pressed="true" attribute to a button.

Example

Example HTML usage: 
<button type="button" class="btn btn-primary active" aria-pressed="true">
  Active
</button>
<button type="button" class="btn btn-primary">Normal</button>
<div class="btn-group">
  <button type="button" class="btn btn-primary">Left</button>
  <button type="button" class="btn btn-primary active" aria-pressed="true">
    Active
  </button>
  <button type="button" class="btn btn-primary">Right</button>
</div>

Dropdown buttons

Dropdown buttons can provide a menu or popover when clicked.

Example

Action Another action Something else here Separated link
Example HTML usage: 
<div class="input-group">
  <button
    class="btn btn-primary dropdown-toggle"
    type="button"
    data-toggle="dropdown"
    aria-haspopup="true"
    aria-expanded="false"
  >
    Dropdown
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div role="separator" class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

Split buttons

Split buttons contain both a button and a dropdown. Clicking the button performs the action. Clicking the dropdown reveals other actions. Generally, the button is the primary or most common action, and items in the dropdown are secondary or less common actions.

Example

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Example HTML usage: 
<div class="row">
  <div class="col-auto">
    <div class="btn-group">
      <button type="button" class="btn btn-primary">Primary</button>
      <button
        type="button"
        class="btn btn-primary dropdown-toggle dropdown-toggle-split"
        data-toggle="dropdown"
        aria-haspopup="true"
        aria-expanded="false"
      >
        <span class="sr-only">Toggle Dropdown</span>
      </button>
      <div
        class="dropdown-menu"
        x-placement="bottom-start"
        style="
          position: absolute;
          will-change: transform;
          top: 0px;
          left: 0px;
          transform: translate3d(100px, 38px, 0px);
        "
      >
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Separated link</a>
      </div>
    </div>
  </div>
  <div class="col-auto">
    <div class="btn-group">
      <button type="button" class="btn btn-secondary">Secondary</button>
      <button
        type="button"
        class="btn btn-secondary dropdown-toggle dropdown-toggle-split"
        data-toggle="dropdown"
        aria-haspopup="true"
        aria-expanded="false"
      >
        <span class="sr-only">Toggle Dropdown</span>
      </button>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Separated link</a>
      </div>
    </div>
  </div>
</div>

Icon buttons

Icon buttons are buttons with an icon inside. An icon button may or may not have text. Icon buttons can help save space or improve the ability to scan/find buttons quickly.

Use btn-icon-only for buttons with only an icon in it. This optimizes the padding.

For an icon without chrome, use a btn-hover.

Example

Example HTML usage: 
<button class="btn btn-secondary md-icon" type="button">
  <i class="material-icons">mode_comment</i>
  <span class="btn-text">Search</span>
</button>
<button class="btn btn-secondary md-icon" type="button">
  <i class="material-icons">print</i>
</button>
<button class="btn btn-primary md-icon" type="button">
  <i class="material-icons">save</i>
</button>
<button class="btn btn-outline-secondary md-icon" type="button">
  <i class="material-icons">date_range</i>
</button>
<button class="btn btn-secondary md-icon" type="button">
  <span class="btn-text">Lock</span> &nbsp
  <i class="material-icons">arrow_forward</i>
</button>