IconButton

Square icon-only control with the same surface tokens as Button.

When to use

Use IconButton when you need square icon-only control with the same surface tokens as button.

Import

TypeScript

import { IconButton } from '@gzodo/ui'

Use IconButton when the action is identified by an icon. Always set title or aria-label so the control has a name. The hit target is square and matches the control size scale.

Examples

Variants

Same variant set as Button. The icon inherits currentColor and is sized with 1em.

Sizes

Square edges: 22, 28, 32, and 37. Icon font size grows with the size (14 / 16 / 18 / 18).

Color

Pass a semantic color, or pass danger / success / warning as variant — that form is remapped to color.

Loading and disabled

Loading replaces the icon with a spinner and sets aria-busy. Disabled removes the button from the tab order.

IconButton

Property

Description

Type

Default

size

Fixed height of the control.

'sm' | 'md' | 'lg' | 'xl'

'md'

variant

Surface treatment. Primary is the main action.

—

color

Semantic color layered on top of the variant.

'danger' | 'success' | 'warning'

—

fullWidth

Stretch the control to the container width.

boolean

false

disabled

Blocks interaction and lowers opacity.

boolean

false

className

Extra classes, merged with the component classes.

string

—

children

The icon. Size it with 1em so it follows the control.

ReactNode

—

isLoading

Replaces the icon with a spinner.

boolean

false

title

Accessible name. Prefer this or aria-label.

string

—

Segment

Input