Buttons

The <button> HTML element is an interactive element activated by a user with a mouse, keyboard, finger, voice command, or other assistive technology. Once activated, it then performs an action, such as submitting a form or opening a dialog.

Buttons are used to submit forms, or as an interactive element to make an action happen, such as showing or hiding information, or loading information.

Buttons should have a type attribute. By default, a button has a submit type, which will submit a form on the page. Explicitly setting a type to submit is recommended. If the button is for triggering a custom event, set the type button.

Basic button

These are the default styles for a button. Primary color, solid variant, medium size.

<button class="btn btn-primary">Default button styles</button>

Button-styled link

You can style an anchor tag like a button, using all the same variants, colors, and sizes.

<a href="#" class="btn btn-primary">This is a link</a>

Variants

There are three variants: solid (default), outline, and link.

<button class="btn btn-primary">Solid (default) variant</button>
<button class="btn btn-outline-primary">Outline variant</button>
<button class="btn btn-link">Link-styled variant</button>

Color

Use a primary colored solid button for your main action. If you want a secondary action, use an outline primary button. The danger color should be used sparingly, for destructive actions like deleting or removing.

While all other theme colors are available (btn-secondary, btn-success, btn-info), we discourage their use.

<button class="btn btn-primary">Sign me up!</button>
<button class="btn btn-outline-primary">Nevermind</button>
<button class="btn btn-danger">Delete</button>

Size

There are four sizes of button: xs, sm, md, and lg. Because medium is default, no extra class is needed.

<button class="btn btn-primary btn-sm">Small</button>
<button class="btn btn-primary">Medium (default)</button>
<button class="btn btn-primary btn-lg">Large</button>

Icons and other children

If a button has an icon associated with it, add the icon as a child inside the button. We use Font Awesome regular or solid versions for our icons.

<button class="btn btn-primary"><i class="fa-regular fa-clock"></i> Submit time</button>
<button class="btn btn-primary"><i class="fa-solid fa-unlock"></i> Request Access</button>
<a href="#" class="btn btn-outline-primary" target="_blank" rel="noopener noreferrer">
  Give feedback (opens a new tab) <i class="fa-solid fa-arrow-up-right-from-square"></i>
</a>

Close button

Close buttons are used in modals and off-canvas drawer-style navigation.

Accessibility

This button needs to have aria-label="Close" for screenreaders to read out text.

<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

Button Badge

Used to remove filters in search functions.

<button class="btn btn-sm btn-light rounded-pill"
  ><span>Variable A2</span><i class="fa-solid fa-x ms-2"></i>
</button>
<button class="btn btn-sm btn-dark rounded-pill"
  ><span>Variable A2</span><i class="fa-solid fa-x ms-2"></i>
</button>
<button class="btn btn-sm btn-white rounded-pill"
  ><span>Variable A2</span><i class="fa-solid fa-x ms-2"></i>
</button>

Icon Buttons

Icon buttons are a popular UI element that are commonly used in situations where space is limited and traditional button text may not be practical or necessary. By using an icon instead of text, icon buttons can convey information quickly and effectively while taking up less space on the screen.

Icon buttons are particularly useful in situations where users need to perform frequent or repetitive actions. By using a recognizable and intuitive icon, users can quickly identify the purpose of the button and perform the desired action with minimal effort or cognitive load.

Accessibility and Icon buttons

It's important to prioritize accessibility to ensure that all users, regardless of ability, can effectively use and interact with icon buttons. Since there is no text accompanying the icon, it's crucial to provide an aria-label attribute to describe the button's purpose or action. This is particularly important for users who rely on screen readers or other assistive technologies.

Additionally, it's important to ensure that the contrast ratio between the icon and its background meets 3:1 contrast requirements.

  <button class="btn btn-icon" aria-label="Delete file">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
      <path class="danger" d="M432 64C440.8 64 448 71.16 448 80C448 88.84 440.8 96 432 96H413.7L388.2 452.6C385.9 486.1 357.1 512 324.4 512H123.6C90.01 512 62.15 486.1 59.75 452.6L34.29 96H16C7.164 96 0 88.84 0 80C0 71.16 7.164 64 16 64H111.1L137 22.56C145.8 8.526 161.2 0 177.7 0H270.3C286.8 0 302.2 8.526 310.1 22.56L336.9 64H432zM177.7 32C172.2 32 167.1 34.84 164.2 39.52L148.9 64H299.1L283.8 39.52C280.9 34.84 275.8 32 270.3 32H177.7zM381.6 96H66.37L91.67 450.3C92.87 467 106.8 480 123.6 480H324.4C341.2 480 355.1 467 356.3 450.3L381.6 96z"></path>
    </svg>
  </button>
    

Dropdowns

Dropdowns are buttons that open to reveal more information. The button can be styled any way that a button can be styled. See the Bootstrap documentation for full options.

<div class="dropdown">
  <button
    type="button"
    class="btn btn-primary dropdown-toggle"
    data-bs-toggle="dropdown"
    aria-expanded="false">
    Download Metadata
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Download Metadata - CSV</a></li>
    <li><a class="dropdown-item" href="#">Download Metadata - Excel</a></li>
  </ul>
</div>

// Button Bootstrap properties
$btn-hover-bg-tint-amount: 40%;
$btn-border-width: calc($font-size-base / 8);

$btn-border-radius: $border-radius;
$btn-border-radius-sm: $border-radius;
$btn-border-radius-lg: $border-radius;

$btn-padding-y: subtract(($spacer * 0.75), $btn-border-width);
$btn-padding-x: subtract(($spacer * 1.25), $btn-border-width);

$btn-padding-y-sm: subtract(($spacer * 0.625), $btn-border-width);
$btn-padding-x-sm: subtract($spacer, $btn-border-width);
$btn-font-size-sm: $font-size-base;

$btn-padding-y-lg: subtract(($spacer * 0.825), $btn-border-width);
$btn-padding-x-lg: subtract(($spacer * 1.75), $btn-border-width);
$btn-font-size-lg: $font-size-base * 1.125;

• Do not use a button as a link—that is an anchor tag <a href="example.com">.
• Use the correct semantic HTML element. Anchor tags move a user to a new page or a new place on the page. Buttons add interactivity on the current page.

• Buttons in Bootstrap
• Dropdowns in Bootstrap
• <button> element on MDN