IconButton

Photo

Variants

Sizes · the dashed area is the 44pt touch target

Installation

npx axiom add icon-button

pnpm dlx axiom add icon-button

yarn dlx axiom add icon-button

bun x axiom add icon-button

Also copies: tappable, icon.

Usage

import { IconButton } from "@/components/ui/icon-button";

<IconButton icon="close" accessibilityLabel="Close" onPress={close} />;

Props

Prop	Type	Default	Description
`icon`	`IconName`	—	The icon to render, from your icon registry.
`accessibilityLabel`	`string`	—	Required. There is no visible text, so this is the only thing a screen reader can announce.
`variant`	`'ghost' \| 'tinted' \| 'outline' \| 'solid'`	`'ghost'`	`ghost` has no background until pressed, `tinted` sits on a subtle fill, `outline` adds a border, `solid` is for a single prominent action.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Visual size from the `control` size tokens: 32, 44 or 52pt. The touch area never goes below 44pt, `sm` gets `hitSlop` to reach it.
`shape`	`'circle' \| 'square'`	`'circle'`	Corner style. `square` uses the `md` radius, for toolbars and grids.
`onPress`	`() => void`	—	Called when the press ends on the button.
`onLongPress`	`() => void`	—	Called after a long press. Useful to reveal a Menu of related actions.
`disabled`	`boolean`	`false`	Blocks presses and dims the icon with `content.disabled`.
`selected`	`boolean`	`false`	Marks a toggle button as on (like, bookmark). Sets `accessibilityState.selected`.
`color`	`IconColor`	from the variant	Overrides the icon color of the variant with a theme color: `default`, `muted`, `link`, `error`… Ignored while disabled.
`style`	`StyleProp<ViewStyle>`	—	Extra styles for the pressable container.

Colors come from iconButton.<variant>.{default,pressed,selected,disabled}.{background,foreground,border} in the component tokens.

Use cases

Back on the left, overflow on the right. Both keep a 44pt target even though the glyph is 22pt.

Grace Hopper

Grace HopperRear admiral · Arlington

<AppBar>
	<AppBar.Leading>
		<IconButton
			icon="chevron-left"
			accessibilityLabel="Back"
			onPress={goBack}
		/>
	</AppBar.Leading>
	<AppBar.Title>Grace Hopper</AppBar.Title>
	<AppBar.Actions>
		<IconButton
			icon="more"
			accessibilityLabel="More options"
			onPress={openMenu}
		/>
	</AppBar.Actions>
</AppBar>

Toggle actions on a post

selected switches the icon state without a label. The count sits next to the button, outside it.

Ada Lovelace2h

128

<IconButton
	icon="heart"
	selected={liked}
	color={liked ? "error" : "default"}
	accessibilityLabel={liked ? "Unlike" : "Like"}
	onPress={toggleLike}
/>

Floating primary action

A single solid, lg button above the content, for the one thing users do most on this screen.

Weekly reportNumbers are up 12%

IdeasOffline mode, share sheet

GroceriesMilk, eggs, coffee

<IconButton
	icon="edit"
	variant="solid"
	size="lg"
	accessibilityLabel="New note"
	onPress={createNote}
	style={styles.fab}
/>

Clear a field

A small button inside an input. size="sm" keeps the field compact while hitSlop keeps it easy to hit.

Contacts

grace

Grace Hopper

Grace Kelly

<Input
	value={query}
	onChangeText={setQuery}
	suffix={
		query ? (
			<IconButton
				icon="circle-x"
				size="sm"
				accessibilityLabel="Clear"
				onPress={() => setQuery("")}
			/>
		) : null
	}
/>