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.
IconButton:
icon:"settings"
label:"Open settings"
variant:variantChoice
scheme:schemeChoice
size:sizeChoiceCONTRACT
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 dataThere are no records to display | ||