IconButton

IconButton is the icon-only action variant built on the same button foundation as Button.

Overview

IconButton styling is split between ButtonBase for semantic variant and appearance behavior, and the local IconButton size layer for square dimensions and icon sizing.

Public CSS Variables

Variable	Value	Affects
Square control size.`IconButton`		No visible change in this state
Border-radius ratio.`IconButton`		No visible change in this state
Suggested icon size derived from the button size.nested icon content		No visible change in this state
Current content color.`ButtonBase`		No visible change in this state
Current background 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

IconButton: local square sizing and radius.
ButtonBase: shared variant, appearance, disabled, hover, active, and focus styling.

State And Variant Interaction

size maps directly to square button size.
variant and appearance are handled by ButtonBase.
Icon legibility depends on both control size and icon glyph selection.

Examples

--icon-button-size and --icon-button-br-ratio turn the square into a large round call control; the nested icon still follows at one third of the size. The hang-up button overrides the background variables, including hover and active.

LTRRTL

css-variable-overrides.tsx · 31 lines

import type { CSSProperties } from 'react';
import { Icon, IconButton } from '@vega-ui/react';
import { MicIcon, PhoneOffIcon, VideoIcon } from '@vega-ui/icons';

const round = {
  '--icon-button-size': '48px',
  '--icon-button-br-ratio': 0.5,
} as CSSProperties;

const hangUp = {
  ...round,
  '--button-background-color': 'var(--color-red-accent-500)',

Do Not Override

Do not remove focus visibility without a replacement.
Do not force icon sizes that look unbalanced inside the chosen button size.
Do not use icon-only styling as a substitute for missing accessible labeling.