Button

Basic button

Also see the <Button> React component

The .bf-button will apply bifrost button styling:

Link styled as button

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

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

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

Combine variants and states

Rounded corners (pill button)

Small size

Button group

Expand button

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

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>
  <button type="button">this will not (use js to handle clicks)</button>
</form>