Button

Primary button with solid background color with contrasting text color. Use it for primary actions or call-to-actions, as the filled button variant stand out and signals importance.

Primary button with solid background color with contrasting text color. Use it for primary actions or call-to-actions, as the filled button variant stand out and signals importance.

Secondary button with no fill, just a border and text. Use it for secondary or less prominent actions. They're great for when you want to offer an alternative without drawing too much attention.

Tertiary button with no fill, only a label. Use it for less prominent actions. They're great for when you want to offer an alternative to basic button without drawing too much attention.

The default button state uses theme colors, and indicate that the button is enabled and can be interacted with.

Alert state buttons should be used for actions that are potentially destructive or irreversible, such as deleting an item or revoking access.

Use for less destructive actions, where the user can easily revert or undo, or when the action won't happen instantly after the button has been pressed by the user.

Example: A confirmation dialog appears before deleting, or the user has to view a summary before the destructive action is completed.

Much alike the flat alert button, this button should be used for less destructive actions. Use it for destructive actions that require more caution than flat alert button, or it is the first step in order to perform a major destructive action.

Example: Use to trigger a confirmation dialog before deleting a user, revoking access to resources or discarding an article draft.

Use for the most critical, destructive actions, where the desctructive action will happen instantly. This button should always stand out and be used sparingly.

Example: Use it for user/account deletion, delete all data or similar actions that are irreversible and/or have major consequences.

Use in flows where the user have to do something before the button becomes enabled. It's muted and gray design signals that the button is currently inactive. Inactive buttons should not be confused with disabled buttons, as inactive can be interacted with and be read by screen readers, while disabled buttons cannot.

Example: A form must be filled out before the user can send a request.

Neutral buttons is an alternative to default themed buttons. For UIs with a lot of color, neutral buttons can help reduce visual noise and make the interface feel more balanced.

Neutral filled button can be used when the UI is either oversaturated with color, or when the button is not the primary action on the page, but still important enough to be a filled button. It should not act as a replacement for filled theme buttons.

Example: A page where you already have a filled theme button on top of the page, but you still want to use a filled button for a secondary action further down the page.

Neutral basic button can be used when you don't want the button to stand out as much as a themed basic button, but still want it to be prominent.

Example: An edit button in a table, where the button should be visible in every row.

Neutral flat button can be used when you want a button with less visual weight than a themed flat button, and when the action i neutral or less important.

Example: Can be used as an icon-only button in toolbars/action menus

Inverted buttons is an alternative to default themed or neutral buttons, where the button is placed on a high contrasting background, like bfc-neutral.

Inverted button is an alternative to default themed filled button, where the button is placed on a high contrasting background, like bfc-neutral or bfc-theme.

Example: An emphasized area with high contrasting background, where themed button wouldn't have enough contrast.

Inverted basic button is an alternative to default themed basic button, where the button is placed on a high contrasting background, like bfc-neutral or bfc-theme.

Example: An emphasized area with high contrasting background, where themed button wouldn't have enough contrast.

Inverted flat button is an alternative to default themed basic button, where the button is placed on a high contrasting background, like bfc-neutral or bfc-theme.

Example: An emphasized area with high contrasting background, where themed button wouldn't have enough contrast.

When a button is clicked, and an action is being performed, the button can be set to inactive state to prevent multiple clicks. You can also show a spinner to indicate that something is happening. Only use if you excpect the action to use more than 2-3 seconds.

Example: Themed buttons with icon, swaps to inactive state when clicked/pressed.

When a button only has an icon, you should use a tooltip to label the button. You should exchange the icon with a spinner icon. You can change the tooltip text for when the button has been pressed.

Example: Icon-only themed buttons, swaps to inactive state when clicked/pressed and offers tooltip with different content for inactive/enabled button.

You can also change the button label when the button is in inactive state and showing a spinner. Be aware that changing the label might cause layout shifts if the new label is longer or shorter than the original label.

Example: Buttons that changes label when clicked/pressed, and shows a spinner.