Button Tokens

Button tokens are defined in bambi.css (installed by the CLI) and consumed by button.css (installed alongside the component). Component tokens are namespaced --bambi-button-*; intent and state tokens are shared across components.

Override them in :root (global) or on a selector (scoped):

/* global override */
:root {
  --bambi-button-radius: 9999px;
  --bambi-state-hover-opacity: 0.85;
}

/* scoped to a container */
.my-card {
  --bambi-button-radius: 0;
  --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) ¹

¹ Resolves to oklch(65% 0.220 271) 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.22 250)
--bambi-intent-primary-fg	var(--bambi-primary-foreground)	oklch(98% 0 0)

Secondary

Token	Default	Light value
--bambi-intent-secondary-bg	var(--bambi-secondary)	oklch(96% 0 0)
--bambi-intent-secondary-fg	var(--bambi-secondary-foreground)	oklch(9% 0 0)
--bambi-border	var(--bambi-border)	oklch(70% 0 0)

Outline

Token	Default	Light value
--bambi-primary	var(--bambi-primary)	oklch(55% 0.22 250)
--bambi-accent	var(--bambi-accent)	oklch(94% 0.008 271)

Ghost

Token	Default	Light value
--bambi-foreground	var(--bambi-foreground)	oklch(9% 0 0)
--bambi-accent	var(--bambi-accent)	oklch(93% 0 0)
--bambi-accent-foreground	var(--bambi-accent-foreground)	oklch(9% 0 0)

Link

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

Danger

Token	Default	Light value
--bambi-intent-danger-bg	var(--bambi-danger)	oklch(55% 0.22 25)
--bambi-intent-danger-fg	var(--bambi-danger-foreground)	oklch(98% 0 0)

Success

Token	Default	Light value
--bambi-intent-success-bg	var(--bambi-success)	oklch(55% 0.17 145)
--bambi-intent-success-fg	var(--bambi-success-foreground)	oklch(98% 0 0)

Warning

Token	Default	Light value
--bambi-intent-warning-bg	var(--bambi-warning)	oklch(75% 0.17 70)
--bambi-intent-warning-fg	var(--bambi-warning-foreground)	oklch(15% 0 0)

---

Examples

Pill buttons globally

:root {
  --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

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

Compact padding

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