IconButton

IconButton provides a compact, icon-only button for actions where visual clarity is more important than text labels. Ideal for toolbars, navigation, and contextual actions.

Preview

Variants

Default

Outlined button with subtle border.

<IconButton icon="☰" accessibilityLabel="Menu" />
<IconButton icon="⚙" accessibilityLabel="Settings" />
<IconButton icon="?" accessibilityLabel="Help" />

Ghost

No background or border, only shows on press.

<IconButton icon="←" variant="ghost" accessibilityLabel="Back" />
<IconButton icon="✕" variant="ghost" accessibilityLabel="Close" />
<IconButton icon="⋮" variant="ghost" accessibilityLabel="More options" />

Filled

Solid background for emphasis.

<IconButton icon="+" variant="filled" accessibilityLabel="Add" />
<IconButton icon="♡" variant="filled" accessibilityLabel="Favorite" />
<IconButton icon="↓" variant="filled" accessibilityLabel="Download" />

Sizes

Size	Dimension	Icon Size	Usage
`sm`	32px	16px	Compact toolbars
`md`	40px	20px	Default
`lg`	48px	24px	Primary actions

Rounded

Use circular shape for floating actions.

<IconButton icon="+" variant="filled" rounded accessibilityLabel="Add" />
<IconButton icon="☰" rounded accessibilityLabel="Menu" />
<IconButton icon="✕" variant="ghost" rounded accessibilityLabel="Close" />

Disabled State

<IconButton icon="☰" disabled accessibilityLabel="Menu" />

With Custom Icons

Use any React element as an icon.

import { Feather } from '@expo/vector-icons';

<IconButton
  icon={<Feather name="menu" size={20} color={colors['text-secondary']} />}
  accessibilityLabel="Menu"
/>

<IconButton
  icon={<Feather name="settings" size={20} color={colors['text-secondary']} />}
  variant="ghost"
  accessibilityLabel="Settings"
/>

API Reference

Props

Prop	Type	Default	Description
`icon`	`ReactNode`	Required	Icon content
`variant`	`'default' \| 'ghost' \| 'filled'`	`'default'`	Visual variant
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Button size
`disabled`	`boolean`	`false`	Disabled state
`rounded`	`boolean`	`false`	Circular shape
`accessibilityLabel`	`string`	Required	A11y label
`onPress`	`() => void`	-	Press handler
`style`	`ViewStyle`	-	Custom styles

Complete Example

import { IconButton } from '@synchronicity/react-native';
import { View } from 'react-native';

function Header({ onMenuPress, onSettingsPress }) {
  return (
    <View style={styles.header}>
      <IconButton
        icon="☰"
        variant="ghost"
        accessibilityLabel="Open navigation menu"
        onPress={onMenuPress}
      />

      <View style={styles.spacer} />

      <IconButton
        icon="⚙"
        variant="ghost"
        accessibilityLabel="Open settings"
        onPress={onSettingsPress}
      />
    </View>
  );
}