Skip to content
v2.5.0
English
Русский
Documentation

Button

Button is the primary action component built on top of ButtonBase, with size and full-width behavior for common product actions.
StorybookSourceFigma

Overview

Button styling is split between ButtonBase for semantic variant and appearance behavior, and the local Button size layer for spacing, height, and width.

Public CSS Variables

VariableValueAffects
Control height.Button
No visible change in this state
Border-radius ratio.Button
No visible change in this state
Current text color.ButtonBase
No visible change in this state
Current background color.ButtonBase
No visible change in this state
Current border color.ButtonBase
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

  • Button: local size, padding, and fullWidth behavior.
  • ButtonBase: shared variant, appearance, disabled, hover, active, and focus styling.

State And Variant Interaction

  • size changes height, padding, and font size.
  • variant and appearance are mostly handled by ButtonBase.
  • Disabled state is handled at the button-base layer across all appearances.

Examples

Override the public variables inline or in your own class. Colors need the -hover and -active variables too, otherwise hover and press fall back to the variant colors.

css-variable-overrides.tsx · 26 lines
import type { CSSProperties } from 'react';
import { Button } from '@vega-ui/react';

const pill = {
  '--button-br-ratio': 0.5,
} as CSSProperties;

const compact = {
  '--button-height': '32px',
} as CSSProperties;

const success = {

Do Not Override

  • Do not remove focus visibility without a replacement.
  • Do not invent custom appearance strings without matching CSS support.
  • Do not treat semantic navigation and button styling as the same concern.