Button

Anatomy

Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam fuga corporis totam eligendi molestiae ex aperiam soluta, consectetur accusamus accusantium officia praesentium, magni numquam sunt minus architecto libero enim tempore!

Variants

Primary

Use the primary variant for buttons that complete actions (i.e., “submit”) and that are core to the page experience. In general, limit the number of primary buttons on the page to 1-3.

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

<BButton variant="primary">Primary</BButton>

Outline

Use the outline-primary variant for buttons that change modes (i.e., edit), or for buttons that supplement core actions in button groups (i.e., “cancel”)

<button class="btn btn-outline-primary" type="button">Outline</button>

<BButton variant="outline-primary">Outline</BButton>

Subdued

Use the subdued-primary class for buttons that change modes (i.e., edit), or for buttons that supplement core actions in button groups (i.e., “cancel”)

<button class="btn btn-subdued-primary" type="button">Subdued</button>

<BButton variant="subdued-primary">Subdued</BButton>

Quiet

Use the quiet-primary variant for buttons with less prominence than subdued buttons. Quiet buttons look like links but are considered buttons. Quiet buttons could be used in more complex set of related actions, such as a navigation menu. Quiet buttons have no fill (below) and look like a Quiet Link.

<button class="btn btn-quiet-primary" type="button">Quiet</button>

<BButton variant="quiet-primary">Quiet</BButton>

Options

Sizing

The medium (or default) size of buttons should be used in most cases. Small buttons can be used in layouts where space is constricted, such us popups, and in some cases alerts. Larger buttons can be used on prominent tasks, such ast Call to Actions and where the page layout provides generous space to accomodate the larger size.

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

<BButton variant="primary" size="sm">Small button</BButton>
<BButton variant="primary">Small button</BButton>
<BButton variant="primary" size="lg">Small button</BButton>

Icons

By default, not all buttons need an icon, but in some cases including an icon may add context or make a button more identifiable (like a magnifying glass icon in a search button). Typically, the icon should be a leading visual before the text. In some cases, buttons may need a trailing visual (like a dropdown arrow). If buttons are part of a group, icons should be aligned (all buttons have an icon or none of them have an icon).

<button class="btn btn-primary" type="button">
  <i class="bi bi-cloud-download me-2"></i>Download
</button>

<BButton variant="primary">
  <i class="bi bi-cloud-download me-2"></i>Download
</BButton>

For icon-only buttons -- for example a hamburger or a meatball menu, or page forward/backward buttons -- they must be labelled correctly in markup for assistive technologies, and they should have a tooltip in the UI with a text label.

<button class="btn btn-primary btn-sm" type="button" title="More">...</button>
<button class="btn btn-subdued-primary btn-sm" type="button" title="More">...</button>
<button class="btn btn-outline-primary btn-sm" type="button" title="More">...</button>
<button class="btn btn-quiet-primary btn-sm" type="button" title="More">...</button>

<BButton variant="primary" size="sm" title="More">...</BButton>
<BButton variant="subdued-primary" size="sm" title="More">...</BButton>
<BButton variant="outline-primary" size="sm" title="More">...</BButton>
<BButton variant="quiet-primary" size="sm" title="More">...</BButton>