“Button” styles are applied to <button>s and sometimes <a> anchors.

Note however that anchors and button tags have intrinsic differences in purpose and function. See Accessibility for more about buttons vs. links.

Avoid:

• Re-implementing your own button on a <div> for a custom component when a custom-styled <button> does the job.
• Custom tabindexes (unless absolutely necessary or intentional within a given context).
• Styling anchors that link to a resource
• Not setting a href — an anchor without a href is removed from the tab order and not otherwise accessible to assistive technologies.

You can use anchors styled as buttons for ‘actions’ that:

• Cancel a process and don’t change state
• Link to a resource with a user-defined or generated URL parameter.

Using classes for complex state management

Due to limitations with HTML–CSS or in custom JavaScript components sometimes it isn’t possible to provide the correct state styles for :focus, :hover, and :active, eg. when transposing :focus from an input[type=radio] to a sibling span, all nested inside a <label> (see Control inputs).

For this reason the states are exposed as BEM variant classes, auto-styled to match the buttons style they’re appended to:

• :focus: .bc-btn--focus
• :hover: .bc-btn--hover
• :active: .bc-btn--active

👉 See all possible button styles and states at once in the Buttons test file.

There are 3 core button styles:

This 3-tier structure can be extended sparingly by:

Adding an icon to a button

Icons can be added to buttons by using the new <BcIcons /> component!

Buttons:

• Receive keyboard focus by default
• “Click” with the Space key
• Submit form data to a server
• Reset a form
• Toggle something in an interface
• Trigger new content like opening a modal
• Be disabled with the disabled attribute
• Instruct a screen reader with the implicit button role
• Show :focus, :hover, :active, :disabled.

Links (<a>):

• Create hypertext links — a network of online resources
• Register a click with the Enter key
• Navigate the user to a new page or view
• Change the user agent URL
• Can cause a browser redraw/refresh
• Support page jumps with internal href attributes
• Deep-link client-rendered applications
• Are focusable by default with the href attribute
• Have the implicit link role
• Can’t be disabled like buttons but can be made inert with tabindex="-1" and aria-hidden="true"
• Allow opening in new windows
• Show :link, :visited, :focus, :hover, & :active.

For more in-depth info check out Marcy Sutton’s Links vs. Buttons in Modern Web Applications.

Badges or “pills” provide scannable visual indicators used for marking or labelling important data points.

Alignment and ordering

• Left-align buttons, with the primary action coming first. This follows the “F” or “Z” eye movement reading pattern users typically use to scan the page, particularly in forms.
• Buttons in modals are right-aligned, with primary button on the right. This is typically due to the behavior of confirming actions in a modal and dismissing it at the same time.
• Actions that interact with a data point such as ‘Edit’ is aligned to the right of the container inline with the heading or data point. This is to maintain visual proximity to the affected data point or section.

Visual distinction

When separating common actions from less common actions:

• Use primary, secondary, and tertiary styles in this order to distinguish order of importance and hierarchy.
• Use the small size modifier to further differentiate nested or tertiary functionality in a page.

ℹ️ If all actions in a page share equal or little importance, use only secondary or tertiary styles.

Correct grouping examples

Incorrect button grouping examples

• Inline control group (Pattern)
• Dropdown menu (Pattern)