Button

Description

.bp-btn is the primary action element. Works as <button> or <a> with no JS. Variants are modifier classes. The public API lets consumers restyle without touching internals.

Usage

Variants

<button class="bp-btn" type="button">Primary</button>
<button class="bp-btn bp-btn--secondary" type="button">Secondary</button>
<button class="bp-btn bp-btn--ghost" type="button">Ghost</button>
<button class="bp-btn bp-btn--danger" type="button">Danger</button>

Sizes

<button class="bp-btn bp-btn--sm" type="button">Small</button>
<button class="bp-btn" type="button">Default</button>
<button class="bp-btn bp-btn--lg" type="button">Large</button>

Icon only

<button class="bp-btn bp-btn--icon" type="button" aria-label="Settings">⚙</button>
<button class="bp-btn bp-btn--icon bp-btn--secondary" type="button" aria-label="Close">✕</button>
<button class="bp-btn bp-btn--icon bp-btn--ghost" type="button" aria-label="More">⋯</button>

Disabled

<style>
.demo-btn--aria-disabled[aria-disabled="true"] { pointer-events: none; opacity: 0.5; }
</style>
<button class="bp-btn" type="button" disabled>Disabled</button>
<button class="bp-btn bp-btn--secondary demo-btn--aria-disabled" type="button" aria-disabled="true"
      onclick="return false">
Aria disabled
</button>

aria-disabled="true" keeps the button in the tab order (useful when you want to explain why it’s disabled via a tooltip). You must also add pointer-events: none and prevent the click handler — unlike disabled, the browser does not do this automatically.

Public API

Variable	Default	Description
`--btn-bg`	`var(--bp-primary)`	Background color
`--btn-color`	`var(--bp-primary-fg)`	Text color
`--btn-radius`	`var(--bp-radius-md)`	Border radius
`--btn-padding`	`var(--bp-space-3) var(--bp-space-6)`	Padding shorthand
`--btn-border`	`none`	Border
`--btn-bg-hover`	`var(--bp-primary-hover)`	Background on hover

Customization example

Custom CTA via public API

<style>
.btn-cta {
  --btn-bg: var(--bp-color-success);
  --btn-radius: var(--bp-radius-full);
  --btn-padding: var(--bp-space-3) var(--bp-space-8);
}
</style>
<button class="bp-btn btn-cta" type="button">Get started free</button>

Variants

Class	Description
`bp-btn--secondary`	Subtle background + border
`bp-btn--ghost`	Transparent background, brand text
`bp-btn--danger`	Error color background
`bp-btn--icon`	Square aspect ratio, icon-only
`bp-btn--sm`	Smaller padding and font size
`bp-btn--lg`	Larger padding and font size

Accessibility

Use <button type="button"> for actions, <a> for navigation.
Icon-only buttons must have aria-label.
:focus-visible is always present — never hidden.
Disabled state uses aria-disabled="true" + CSS pointer-events: none.

Browser APIs

API	Availability	Used for	Without it	Polyfill
Container Queries	Widely available Baseline 2023	Compact layout and full-width at small container sizes	Static layout at all sizes	None needed
`cqi` units	Widely available Baseline 2023	Fluid font-size that scales with container width	Fixed font-size from tokens	None needed

Internals

Do not set these directly — they are component-private:

--_bg — resolves from --btn-bg
--_color — resolves from --btn-color
--_radius — resolves from --btn-radius
--_padding — resolves from --btn-padding
--_border — resolves from --btn-border