Button

Button — основной компонент действия на базе ButtonBase с поддержкой размеров и растягивания на всю ширину для типовых действий в продукте.

Storybook Исходники Figma

Обзор

Стили Button разделены между ButtonBase, который отвечает за семантические варианты и оформление, и локальным слоем размеров Button, который отвечает за отступы, высоту и ширину.

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

Переменная	Значение	Влияет на
Высота контрола.`Button`		В этом состоянии изменений не видно
Коэффициент скругления углов.`Button`		В этом состоянии изменений не видно
Текущий цвет текста.`ButtonBase`		В этом состоянии изменений не видно
Текущий цвет фона.`ButtonBase`		В этом состоянии изменений не видно
Текущий цвет рамки.`ButtonBase`		В этом состоянии изменений не видно

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

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

Button: локальные размер, внутренние отступы и поведение fullWidth.
ButtonBase: общие стили вариантов, оформления, отключённого состояния, наведения, нажатия и фокуса.

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

size меняет высоту, внутренние отступы и размер шрифта.
variant и appearance в основном обрабатывает ButtonBase.
Отключённое состояние обрабатывается на уровне ButtonBase для всех вариантов оформления.

Примеры

Переопределяйте публичные переменные инлайном или в своём классе. Для цвета задавайте и переменные -hover и -active, иначе наведение и нажатие вернутся к цветам варианта.

LTRRTL

css-variable-overrides.tsx · 26 строк

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 = {

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

Не убирайте видимость фокуса без замены.
Не придумывайте кастомные строки оформления без соответствующей поддержки в CSS.
Не смешивайте семантическую навигацию и стилизацию кнопки в одну задачу.