Button

Basic button

Also see the <Button> React component

The .bf-button will apply bifrost button styling:

<button class="bf-button">Button element</button>

Link styled as button

The .bf-button class, and all the combinations below can also be applied to <a> elements.

<a href="/path" class="bf-button">Link element</a>

Filled and flat variants

Another two alternative button variants are supplied:

• .bf-button-filled for primary call-to-action buttons
• .bf-button-flat for tertiary rarely-needed actions

<button class="bf-button">Basic (default)</button>
<button class="bf-button bf-button-filled">Filled</button>
<button class="bf-button bf-button-flat">Flat</button>

State colors

Another three alternative button variants are supplied:

• .bf-button-alert for destructive actions
• .bf-button-inactive for currently unavailable actions (should still happen something on click, like a tooltip explaining why the button is inactive)
• .bf-button-inverted for use on contrasting backgrounds

<div class="bf-inline bf-padding">
  <button class="bf-button">Default</button>
  <button class="bf-button bf-button-alert">Alert</button>
  <button class="bf-button bf-button-inactive">Inactive</button>
</div>
<div class="bfc-inverted-bg bf-padding">
  <button class="bf-button bf-button-inverted">Inverted</button>
</div>

Combine variants and states

Rounded corners (pill button)

<button class="bf-button bf-button-pill">Default</button>
<button class="bf-button bf-button-pill bf-button-filled">Filled</button>
<button class="bf-button bf-button-pill bf-button-flat">Flat</button>
<button class="bf-button bf-button-pill bf-button-alert">Alert</button>
<button class="bf-button bf-button-pill bf-button-inactive">Inactive</button>
<button class="bf-button bf-button-pill bf-button-filled bf-button-inactive">
  Filled Inactive
</button>

Small size

<button class="bf-button bf-button-small">Default</button>
<button class="bf-button bf-button-small bf-button-filled">Filled</button>
<button class="bf-button bf-button-small bf-button-flat">Flat</button>
<button class="bf-button bf-button-small bf-button-alert">Alert</button>
<button class="bf-button bf-button-small bf-button-inactive">Inactive</button>
<button class="bf-button bf-button-small bf-button-filled bf-button-inactive">
  Filled Inactive
</button>

Button group

<div class="bf-button-group">
  <button class="bf-button">Rock</button>
  <button class="bf-button">Paper</button>
  <button class="bf-button bf-button-selected">Scissors</button>
</div>

Expand button

Control open state by toggling the .bf-expand-icon-open class on the icon.

<button class="bf-button-expand bf-neutral-link">
  <div class="bf-expand-icon-wrapper">
    <i class="bf-expand-icon fa-solid fa-angle-right"></i>
  </div>
  <span class="bf-neutral-link-text">Toggle (closed)</span>
</button>
<button class="bf-button-expand bf-neutral-link">
  <div class="bf-expand-icon-wrapper">
    <i class="bf-expand-icon bf-expand-icon-open fa-solid fa-angle-right"></i>
  </div>
  <span class="bf-neutral-link-text">Toggle (open)</span>
</button>

A note about type

The default type of a <button> is submit. Unless you need the button to submit a <form> you probably want <button type='button'> instead.

<form>
  <button>this button will submit the form</button>
</form>
<button type="button">button with a javascript click handler</button>

Sandbox

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/js/solid.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/js/regular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/js/fontawesome.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@intility/bifrost-css@latest/dist/bifrost-all.css">
<link rel="stylesheet" href="styles.css">

<div class="bf-page-padding bf-inline">
  <button type="button" class="bf-button">Basic</button>
  <button type="button" class="bf-button bf-button-filled">Filled</button>
  <button type="button" class="bf-button bf-button-flat">Flat</button>
  <button type="button" class="bf-button bf-button-alert">Alert</button>
  <button type="button" class="bf-button bf-button-pill bf-button-filled">Pill</button>
  <button type="button" class="bf-button bf-button-small bf-button-filled">Small</button>
</div>
<div class="bf-page-padding">
  <div class="bf-button-group">
    <button type="button" class="bf-button">Rock</button>
    <button type="button" class="bf-button">Paper</button>
    <button type="button" class="bf-button bf-button-selected">Scissors</button>
  </div>
</div>
<div class="bf-page-padding">
  <button type="button" class="bf-button-expand bf-neutral-link" id="expandButton">
    <div class="bf-expand-icon-wrapper">
      <i class="bf-expand-icon fa-solid fa-angle-right"></i>
    </div>
    <span class="bf-neutral-link-text">Toggle content</span>
  </button>
  <div class="bf-expand bf-expand-closed" id="expandContent">
    <div>
      <div style="padding: 12px 0">
        This content is revealed with a height transition using
        <code>.bf-expand</code>.
      </div>
    </div>
  </div>
</div>

<script>
  const expandButton = document.getElementById("expandButton");
  const expandContent = document.getElementById("expandContent");

  expandButton.addEventListener("click", () => {
    const icon = expandButton.querySelector(".bf-expand-icon");
    if (icon) icon.classList.toggle("bf-expand-icon-open");
    expandContent.classList.toggle("bf-expand-closed");
  });
</script>