Button Tokens

Button tokens are public component-local CSS custom properties defined on .bambi-button in button.css (installed alongside the component). Global intent and state tokens still come from bambi.css and are shared across components.

Because --bambi-button-* defaults are declared on .bambi-button, override them on .bambi-button, a more specific button selector, or inline style. Override shared intent/state tokens in :root when you want multiple components to inherit the same theme behavior.

/* all buttons */
.bambi-button {
  --bambi-button-radius: 9999px;
}

/* shared state token */
:root {
  --bambi-state-hover-opacity: 0.85;
}

/* scoped to a container */
.my-card .bambi-button {
  --bambi-button-radius: 0;
}

/* shared intent token scoped to a container */
.my-card {
  --bambi-intent-primary-bg: oklch(55% 0.2 160);
}

Layout & Typography

Token	Default	Resolved value
`--bambi-button-gap`	`var(--bambi-space-1-5)`	`0.375rem`
`--bambi-button-border-width`	`1px`	—
`--bambi-button-line-height`	`1`	—
`--bambi-button-font-family`	`var(--bambi-font-sans)`	`system-ui, sans-serif`
`--bambi-button-font-weight`	`var(--bambi-font-weight-medium)`	`500`
`--bambi-button-font-size-sm`	`var(--bambi-text-xs)`	`0.75rem`
`--bambi-button-font-size-md`	`var(--bambi-text-sm)`	`0.875rem`
`--bambi-button-font-size-lg`	`var(--bambi-text-base)`	`1rem`

Padding

Token	Default
`--bambi-button-padding-sm`	`0.375rem 0.75rem`
`--bambi-button-padding-md`	`0.5rem 1rem`
`--bambi-button-padding-lg`	`0.625rem 1.25rem`
`--bambi-button-padding-icon`	`0.5rem`

Border Radius

Token	Default	Resolved value
`--bambi-button-radius`	`var(--bambi-radius-md)`	`0.5rem`

All button sizes share --bambi-button-radius. The loading spinner uses --bambi-radius-full (9999px) directly.

Interaction

Token	Default	Resolved value
`--bambi-button-transition`	`background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease`	—
`--bambi-state-hover-opacity`	`1`	—
`--bambi-button-disabled-opacity`	`var(--bambi-state-disabled-opacity)`	`0.5`
`--bambi-button-focus-ring-width`	`var(--bambi-state-focus-ring-width)`	`2px`
`--bambi-button-focus-ring-offset`	`var(--bambi-state-focus-ring-offset)`	`2px`
`--bambi-button-ring`	`var(--bambi-state-focus-ring)`	`oklch(55% 0.220 271)` ¹
`--bambi-button-outline-color`	`var(--bambi-intent-primary-hover-bg)`	`oklch(49% 0.230 271)`

¹ Resolves through --bambi-primary, which maps to --bambi-primary-400 in dark mode.

Loading Spinner

Token	Default
`--bambi-button-spinner-border-width`	`2px`
`--bambi-button-spinner-duration`	`0.6s`

Intent and Appearance Colors

Color tokens resolve from the global theme and change between light and dark mode. Values shown are light mode defaults.

Primary

Token	Default	Light value
`--bambi-intent-primary-bg`	`var(--bambi-primary)`	`oklch(55% 0.220 271)`
`--bambi-intent-primary-fg`	`var(--bambi-primary-foreground)`	`oklch(100% 0 0)`

Secondary

Token	Default	Light value
`--bambi-intent-secondary-bg`	`var(--bambi-secondary)`	`oklch(95% 0.008 271)`
`--bambi-intent-secondary-fg`	`var(--bambi-secondary-foreground)`	`oklch(9% 0 0)`
`--bambi-border`	`var(--bambi-border)`	`oklch(90% 0.010 271)`

Outline

Token	Default	Light value
`--bambi-button-outline-color`	`var(--bambi-intent-primary-hover-bg)`	`oklch(49% 0.230 271)`
`--bambi-button-hover-bg`	`color-mix(in oklch, var(--bambi-button-outline-color) 10%, transparent)`	—
`--bambi-button-hover-fg`	`var(--bambi-button-outline-color)`	`oklch(49% 0.230 271)`

Ghost

Token	Default	Light value
`--bambi-foreground`	`var(--bambi-foreground)`	`oklch(9% 0 0)`
`--bambi-accent`	`var(--bambi-accent)`	`oklch(94% 0.008 271)`
`--bambi-accent-foreground`	`var(--bambi-accent-foreground)`	`oklch(9% 0 0)`

Link

Token	Default	Light value
`--bambi-primary`	`var(--bambi-primary)`	`oklch(55% 0.220 271)`
`--bambi-button-link-underline-offset`	`4px`	—

Danger

Token	Default	Light value
`--bambi-intent-danger-bg`	`var(--bambi-danger)`	`oklch(65% 0.233 28)`
`--bambi-intent-danger-fg`	`var(--bambi-danger-foreground)`	`oklch(100% 0 0)`

Success

Token	Default	Light value
`--bambi-intent-success-bg`	`var(--bambi-success)`	`oklch(73% 0.194 153)`
`--bambi-intent-success-fg`	`var(--bambi-success-foreground)`	`oklch(9% 0 0)`

Warning

Token	Default	Light value
`--bambi-intent-warning-bg`	`var(--bambi-warning)`	`oklch(78% 0.159 74)`
`--bambi-intent-warning-fg`	`var(--bambi-warning-foreground)`	`oklch(9% 0 0)`

Examples

Pill buttons globally

.bambi-button {
  --bambi-button-radius: 9999px;
}

Brand-coloured buttons

:root {
  --bambi-intent-primary-bg: oklch(55% 0.2 160);      /* green */
  --bambi-intent-primary-fg: oklch(98% 0 0);
}

Slower hover transition

.bambi-button {
  --bambi-button-transition: opacity 0.3s ease, background-color 0.3s ease;
}

Compact padding

.bambi-button {
  --bambi-button-padding-md: 0.375rem 0.75rem;
  --bambi-button-padding-lg: 0.5rem 1rem;
}