CONTROL

IconButton

Icon buttons provide compact square actions with a required accessible label.

PLAYGROUND

Configure an icon button

Visual props update the preview. The icon name and accessible label remain static.

Scheme
Variant
Size
dowe
IconButton:
  icon:"settings"
  label:"Open settings"
  variant:variantChoice
  scheme:schemeChoice
  size:sizeChoice

CONTRACT

Icon-only by design

IconButton has no children. Its hidden label describes the action.

Required icon

Use a quoted Solar name. The linear icon inherits the control foreground.

Accessible label

Use a short, non-empty action label, such as Open settings or Delete item.

Actions and navigation

Use onClick for an action or the shared navigation props for movement.

SCHEMES AND VARIANTS

Every semantic color

Each row keeps one variant fixed so the eight color families are easy to compare.

Solid

Soft

Outlined

Ghost

SIZES

Five square densities

Sizes xs through xl create square controls from 24 to 56 target units.

Inside Grid, the track may grow while IconButton keeps its fixed square dimensions.

API

Props

IconButton also accepts common spacing, sizing, visibility, and accessibility props.

Explicit width and height override the dimensions derived from size.

Prop
Type
Default

No data

There are no records to display