ButtonBase

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

Overview

ButtonBase owns the shared action styling contract used by higher-level button components. It exposes public-looking --button-* variables internally and maps variant plus appearance to theme tokens and state colors.

Public CSS Variables

Variable	Value	Affects
default text/icon color		No visible change in this state
hover text/icon color		No visible change in this state
active text/icon color		No visible change in this state
default surface color		No visible change in this state
hover surface color		No visible change in this state
active surface color		No visible change in this state
default border color		No visible change in this state
hover border color		No visible change in this state
active border color		No visible change in this state
Chroma added to the accent color in tinted backgrounds.		No visible change in this state

Edit a value to try it in the demo. Hover a variable to outline what it changes; switch the preview state to see hover, pressed, focus, disabled and invalid variables. Click a name to copy it.

Part-Level Variables

Root

The root .buttonBase element owns all button color, border, and focus behavior.

Slotted Child

When asChild is used, the slotted element receives the same classes and data attributes. It does not create a second styling layer.

State And Variant Interaction

data-variant='primary' | 'secondary' switches the color family.
data-appearance='fill' | 'outline' | 'ghost' | 'transparent' switches the structural treatment.
Disabled styles map to --disable-* theme tokens.
Focus uses --focus-color.

Examples

Override radius in a local wrapper

ButtonBase has no size of its own, so padding and radius come from you. Border and text colors are overridden through the --button-* variables, including their hover and active pairs.

LTRRTL

override-radius-in-a-local-wrapper.tsx · 31 lines

import type { CSSProperties } from 'react';
import { ButtonBase } from '@vega-ui/react';

const pill: CSSProperties = {
  padding: 'var(--spacing-3) var(--spacing-10)',
  borderRadius: 999,
  fontSize: 'var(--font-size-2)',
};

const brand = {
  ...pill,
  '--button-border-color': 'var(--color-amethyst-accent-500)',

Do Not Override

inventing unsupported variant names without matching CSS
treating asChild as a styling escape hatch
replacing semantic theme tokens with raw hardcoded colors inside reusable component styles