atom

IconButton

Icon-only button for compact actions. Requires accessibilityLabel for accessibility.

Overview

The IconButton component is a compact button displaying only an icon. It's ideal for toolbars, headers, and dense UIs. An accessibilityLabel prop is required for screen reader accessibility.

Props

Prop	Type	Default	Description
`icon`	`(props: { color: string; size: number }) => ReactNode`	-	Required. Icon element to display
`accessibilityLabel`	`string`	-	Required. Accessibility label for screen readers
`onPress`	`(event: GestureResponderEvent) => void`	-	Gesture handler
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size of the button
`variant`	`'solid' \| 'soft' \| 'ghost' \| 'outline'`	`'ghost'`	Visual style variant
`color`	`'base' \| 'primary' \| 'primary-alt' \| 'success' \| 'warning' \| 'danger'`	`'base'`	Color variant
`radius`	`'sm' \| 'md' \| 'lg' \| 'full'`	`'md'`	Border radius
`disabled`	`boolean`	`false`	Whether the button is disabled
`loading`	`boolean`	`false`	Whether the button is in loading state
`testID`	`string`	-	Test ID for testing

Variants

Visual Variants

Four styles for different emphasis levels.

<IconButton icon={(props) => <Bell {...props} />} variant="solid" accessibilityLabel="Notifications" />
<IconButton icon={(props) => <Bell {...props} />} variant="soft" accessibilityLabel="Notifications" />
<IconButton icon={(props) => <Bell {...props} />} variant="ghost" accessibilityLabel="Notifications" />
<IconButton icon={(props) => <Bell {...props} />} variant="outline" accessibilityLabel="Notifications" />

Colors

Semantic colors for different actions.

<IconButton icon={(props) => <Settings {...props} />} color="base" accessibilityLabel="Base" />
<IconButton icon={(props) => <Settings {...props} />} color="primary" accessibilityLabel="Primary" />
<IconButton icon={(props) => <Settings {...props} />} color="primary-alt" accessibilityLabel="Primary Alt" />
<IconButton icon={(props) => <Settings {...props} />} color="success" accessibilityLabel="Success" />
<IconButton icon={(props) => <Settings {...props} />} color="warning" accessibilityLabel="Warning" />
<IconButton icon={(props) => <Trash2 {...props} />} color="danger" accessibilityLabel="Delete" />

Sizes

Three size options for different contexts.

<IconButton icon={(props) => <Bell {...props} />} size="sm" accessibilityLabel="Notifications" />  {/* 32px */}
<IconButton icon={(props) => <Bell {...props} />} size="md" accessibilityLabel="Notifications" />  {/* 40px */}
<IconButton icon={(props) => <Bell {...props} />} size="lg" accessibilityLabel="Notifications" />  {/* 48px */}

Radius

Control border radius, including circular buttons.

<IconButton icon={(props) => <Bell {...props} />} radius="sm" variant="outline" accessibilityLabel="Small radius" />
<IconButton icon={(props) => <Bell {...props} />} radius="md" variant="outline" accessibilityLabel="Medium radius" />
<IconButton icon={(props) => <Bell {...props} />} radius="lg" variant="outline" accessibilityLabel="Large radius" />
<IconButton icon={(props) => <Bell {...props} />} radius="full" variant="outline" accessibilityLabel="Full radius" />

Examples

Header Actions (from your app)

Common pattern in the application header.

<IconButton icon={(props) => <Bell {...props} />} accessibilityLabel="Notifications" />
<IconButton icon={(props) => <LogOut {...props} />} accessibilityLabel="Logout" />

Navigation Buttons

For pagination or carousel navigation.

Destructive Action

Use danger color for delete actions.

<IconButton icon={(props) => <Trash2 {...props} />} color="danger" accessibilityLabel="Delete item" />

Circular Buttons

Use radius="full" for circular buttons.

States

<IconButton icon={(props) => <Bell {...props} />} accessibilityLabel="Notifications" />
<IconButton icon={(props) => <Bell {...props} />} disabled accessibilityLabel="Notifications" />
<IconButton icon={(props) => <Bell {...props} />} loading accessibilityLabel="Loading" />