CSS reference - Bifrost

Button styling

Basic button

Also see the <Button> React component

The .bf-button will apply bifrost button styling:

<button class="bf-button">Button element</button>
<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>
<a href="/path" class="bf-button">Link element</a>

Link element

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>
<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>
<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

state	variant
default
inactive
neutral
alert
inverted

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>
<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 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>
<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>
<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>
<form>
  <button>this button will submit the form</button>
</form>
<button type="button">button with a javascript click handler</button>