Form

IconButton

Icon-only push button sharing the Button variants and sizes. Requires an aria-label because there is no visible text.

Import

import { IconButton } from "@zephora/react";

Examples

Variants

IconButton reuses the six Button variants.

<IconButton aria-label="Add" icon={<PlusIcon />} variant="solid" />
<IconButton aria-label="Add" icon={<PlusIcon />} variant="soft" />
<IconButton aria-label="Add" icon={<PlusIcon />} variant="outline" />
<IconButton aria-label="Add" icon={<PlusIcon />} variant="ghost" />
<IconButton aria-label="Delete" icon={<TrashIcon />} variant="danger" />

Shape and size

`shape="circle"` renders a round button; three sizes match Button.

<IconButton aria-label="Search" icon={<SearchIcon />} size="sm" />
<IconButton aria-label="Search" icon={<SearchIcon />} size="md" />
<IconButton aria-label="Search" icon={<SearchIcon />} size="lg" />
<IconButton aria-label="Search" icon={<SearchIcon />} shape="circle" />

Loading

`loading` swaps the icon for a spinner and disables interaction.

<IconButton aria-label="Saving" icon={<PlusIcon />} loading />

API

IconButton props

Prop	Type	Default	Description
`icon` *	`ReactNode`	—	The icon to render. Marked aria-hidden; the accessible name comes from aria-label.
`aria-label` *	`string`	—	Accessible name — required because the button has no visible text.
`variant`	`"solid" \| "soft" \| "outline" \| "ghost" \| "link" \| "danger"`	`"solid"`	Visual style, shared with Button.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Control size.
`shape`	`"square" \| "circle"`	`"square"`	Outer shape of the button.
`loading`	`boolean`	`false`	Shows a spinner, sets aria-busy and disables interaction.
`unstyled`	`boolean`	`false`	Headless mode — drops Zephora classes so your own CSS can style it.
`…rest`	`ButtonHTMLAttributes<HTMLButtonElement>`	—	All native button props (onClick, disabled, type…) are forwarded.

Keyboard

Key	Action
`Enter / Space`	Activates the button.
`Tab`	Moves focus.