ButtonBase

ButtonBase is the low-level action primitive behind Button and IconButton.

Root Props

Prop	Type	Default
`variant`	`ButtonBaseVariant`	`'primary'`
Defines the visual style of the button, affecting color schemes and emphasis.
`appearance`	`ButtonBaseAppearance`	`'fill'`
Adjusts the button's structural appearance (background, border, etc.).
`disabled`	`boolean`	—
Disables the button when true. Prevents user interaction and applies a visually disabled state. Not applied with `asChild`: the child element owns its disabled state, for example, `aria-disabled` or a link without `href`.
`className`	`string`	—
Optional custom CSS class for the button element. Useful for design system overrides or scoped styles.
`asChild`	`boolean`	—
When true, renders the button as a child component using `Slot` (e.g., from Radix UI). Enables polymorphic rendering — useful for making the button act as a link or custom tag.
`children`	`ReactNode`	—
Content of the button — text, icon, or any React node.
`ref`	`Ref<HTMLButtonElement>`	—
Ref forwarded to the native `<button>` element. Allows direct DOM access for focus management or measuring.

Also accepts all <button> attributes.

ButtonBase has no exported structural child parts.

When asChild is enabled, one slotted child element becomes the rendered semantic target.

Type	Definition	Notes
`ButtonBaseProps`	root prop type	Extends native button attributes.
`ButtonBaseVariant`	`'primary' \| 'secondary' \| string`	Visual color family.
`ButtonBaseAppearance`	`'fill' \| 'outline' \| 'ghost' \| 'transparent' \| string`	Visual surface style.

ButtonBase has no internal state.
Visual behavior comes from variant, appearance, and native states such as :hover, :active, :focus-visible, and disabled.
asChild changes the rendered element, not the styling contract.

Set type='button' for non-submit actions inside forms.
Add an explicit accessible name for icon-only content.
Use Button or IconButton when product code needs higher-level layout and sizing APIs.