Component

Button

Backed by @base-ui/react/button. Anatomy is fixed: a single root part. Base UI reference.

Install

npx bambiui add button

Import from your own project source, never from Base UI directly, and never from a published bambiui package:

import { Button } from "@/components/ui/button";

Variants

Sizes

States

Hover, active, and focus-visible are styled but cannot be shown statically. Use the component with a mouse or keyboard to verify those interaction states.

Supported states: `default`, `hover`, `active`, `focus-visible`, `disabled`.

Props

Prop	Type	Default
`variant`	"primary" \| "secondary" \| "ghost"	`"primary"`
`size`	"sm" \| "md" \| "lg"	`"md"`
`type`	"button" \| "submit" \| "reset"	`"button"`

Native props and refs supported by the underlying Base UI primitive are preserved.

Tokens

Override any of these in your theme CSS to restyle Button:

--bambi-button-background
--bambi-button-foreground
--bambi-button-border
--bambi-button-radius
--bambi-button-height-sm
--bambi-button-height-md
--bambi-button-height-lg
--bambi-button-padding-x-sm
--bambi-button-padding-x-md
--bambi-button-padding-x-lg