Button

Basic Button

Works much like a native <button>. Use onClick to listen for click/tap/enter.

Submitting a form

Bifrost <Button> is type="button" by default since 4.0.

This differs from a native <button> (and bifrost < 4.0) which defaults to "submit" when type is omitted.

If you want to submit a <form>, you need to explicitly use <Button type="submit"> or <SubmitButton>.

// if form has an `action` or `onSubmit` handler
<form>
  <Button type="submit">Submit the form</Button>
</form>

Link button

If the button navigates to a new URL on click, you should use a html link element (<a>) instead of <Button>.

You can style links as buttons using the .bf-button css class. This should work fine for <Link> components from react-router or next/link as well.

Variants

Options for variant prop:

• 'basic': Default button variant. Same as not passing a variant.
• 'filled': A powerful call-to-action button. Preferably only used once per page.
• 'flat': A tertiary button for actions that don't need as much focus.

States

Options for 'state' prop:

• 'default': Default state. Same as not passing a state.
• 'inactive': Dimmed button. Use instead of disabled button.
• 'neutral': Neutral colors. Nice when you have multiple buttons and don't want to overload the UI.
• 'alert': Red colored button. Use for destructive actions. E.g deletion.
• 'inverted': Inverted colors for use on contrasting backgrounds.

Combine state and variant

You can use any variant combined with any state.

Small size

Use the small prop for a smaller button size.

Icon

You can put JSX content inside a button, including <Icon>

Icon-only button

If you have a button without text content, don't forget to add an aria-label to make it accessible for screen readers.

Use noPadding to make the button square (it has a min-width equal to its height).

Pill (rounded)

The pill prop will round the corners.

Button.Group

Buttons can be used within a group, marked as selected with the active boolean prop.

<Button.Group>
  <Button active>Selected</Button>
  <Button>Default</Button>
</Button.Group>

Button.Expand

Control <Button.Expand> state with the open prop, and use onClick just like any other button.

Useful for toggling expandable content.