ButtonBase

ButtonBase — низкоуровневый примитив действия, на котором построены Button и IconButton.

Обзор

ButtonBase отвечает за общий контракт стилей действия, который используют более высокоуровневые компоненты кнопок. Внутри он использует похожие на публичные переменные --button-* и сопоставляет variant и appearance с токенами темы и цветами состояний.

Публичные CSS-переменные

Переменная	Значение	Влияет на
цвет текста/иконки по умолчанию		В этом состоянии изменений не видно
цвет текста/иконки при наведении		В этом состоянии изменений не видно
цвет текста/иконки при нажатии		В этом состоянии изменений не видно
цвет поверхности по умолчанию		В этом состоянии изменений не видно
цвет поверхности при наведении		В этом состоянии изменений не видно
цвет поверхности при нажатии		В этом состоянии изменений не видно
цвет рамки по умолчанию		В этом состоянии изменений не видно
цвет рамки при наведении		В этом состоянии изменений не видно
цвет рамки при нажатии		В этом состоянии изменений не видно
Насыщенность, добавляемая к акцентному цвету в тонированных фонах.		В этом состоянии изменений не видно

Измените значение, чтобы примерить его в демо. Наведите на переменную, чтобы обвести то, что она меняет; переключите состояние превью, чтобы увидеть переменные наведения, нажатия, фокуса, отключённого состояния и ошибки. Клик по имени копирует его.

Переменные частей

Корень

Корневой элемент .buttonBase отвечает за цвета кнопки, рамку и поведение фокуса.

Дочерний элемент в слоте

При asChild элемент в слоте получает те же классы и data-атрибуты. Второго слоя стилей не появляется.

Взаимодействие состояний и вариантов

data-variant='primary' | 'secondary' переключает цветовое семейство.
data-appearance='fill' | 'outline' | 'ghost' | 'transparent' переключает структурное оформление.
Стили отключённого состояния используют токены темы --disable-*.
Фокус использует --focus-color.

Примеры

Переопределение скругления в локальной обёртке

У ButtonBase нет собственного размера, поэтому отступы и скругление задаёте вы. Цвет рамки и текста переопределяется через переменные --button-*, включая пары для наведения и нажатия.

LTRRTL

override-radius-in-a-local-wrapper.tsx · 31 строка

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)',

Не переопределяйте

придуманные неподдерживаемые имена вариантов без соответствующего CSS
asChild как лазейку для стилей
семантические токены темы, заменённые жёстко заданными цветами внутри стилей переиспользуемых компонентов