managarten/apps/picture/packages/mobile-ui/components/navigation/HeaderButton/README.md

HeaderButton

Icon button component for header actions.

Features

• ✅ Icon-based button
• ✅ Press feedback
• ✅ Disabled state
• ✅ Customizable size and color
• ✅ Touch target optimization (hit slop)
• ✅ Clean, minimal design

Installation

npx @memoro/ui add header-button

Dependencies: icon

Usage

Basic HeaderButton

import { HeaderButton } from '@/components/navigation/HeaderButton';

<HeaderButton icon="search" onPress={() => console.log('Search')} />;

Custom Size and Color

<HeaderButton icon="settings" onPress={handleSettings} size={28} iconColor="#3B82F6" />

Disabled State

<HeaderButton
	icon="save"
	onPress={handleSave}
	disabled={!hasChanges}
	iconColor={hasChanges ? '#10B981' : '#9CA3AF'}
/>

Multiple Buttons

<View style={{ flexDirection: 'row', gap: 4 }}>
	<HeaderButton icon="search" onPress={handleSearch} />
	<HeaderButton icon="filter" onPress={handleFilter} />
	<HeaderButton icon="ellipsis-horizontal" onPress={handleMore} />
</View>

Props

Prop	Type	Default	Description
icon	string	-	Required - Icon name
onPress	() => void	-	Required - Press handler
size	number	24	Icon size in pixels
iconColor	string	'#6B7280'	Icon color
disabled	boolean	false	Button is disabled
style	ViewStyle	-	Additional styles
hitSlop	object	{top:10,bottom:10,left:10,right:10}	Touch target expansion

Default Styling

• Icon Size: 24px
• Icon Color: Gray (#6B7280)
• Padding: 8px
• Hit Slop: 10px all sides
• Disabled Opacity: 0.4
• Pressed Opacity: 0.7

Examples

Save Button

<HeaderButton icon="checkmark" onPress={handleSave} iconColor="#10B981" />

Close Button

<HeaderButton icon="close" onPress={handleClose} iconColor="#EF4444" />

Add Button

<HeaderButton icon="add" onPress={handleAdd} iconColor="#3B82F6" size={28} />

Share Button

<HeaderButton icon="share-outline" onPress={handleShare} />

More Menu

<HeaderButton icon="ellipsis-horizontal" onPress={handleOpenMenu} />

Edit Button

<HeaderButton
	icon="pencil"
	onPress={handleEdit}
	disabled={!canEdit}
	iconColor={canEdit ? '#3B82F6' : '#9CA3AF'}
/>

Integration with Header

Single Action

<Header
	title="Details"
	showBackButton
	onBackPress={() => router.back()}
	rightContent={<HeaderButton icon="ellipsis-horizontal" onPress={handleMore} />}
/>

Multiple Actions

<Header
	title="Photos"
	rightContent={
		<View style={{ flexDirection: 'row', gap: 4 }}>
			<HeaderButton icon="search" onPress={handleSearch} />
			<HeaderButton icon="filter" onPress={handleFilter} />
			<HeaderButton icon="ellipsis-horizontal" onPress={handleMore} />
		</View>
	}
/>

Conditional Actions

<Header
	title="Edit"
	showBackButton
	onBackPress={() => router.back()}
	rightContent={
		<>
			{isEditing && (
				<HeaderButton
					icon="checkmark"
					onPress={handleSave}
					iconColor="#10B981"
					disabled={!hasChanges}
				/>
			)}
		</>
	}
/>

Common Use Cases

Search

<HeaderButton icon="search" onPress={handleSearch} />

Filter

<HeaderButton icon="filter" onPress={handleFilter} />

Sort

<HeaderButton icon="swap-vertical" onPress={handleSort} />

Settings

<HeaderButton icon="settings-outline" onPress={handleSettings} />

Notifications

<View>
	<HeaderButton icon="notifications-outline" onPress={handleNotifications} />
	{hasUnread && (
		<View
			style={{
				position: 'absolute',
				top: 6,
				right: 6,
				width: 8,
				height: 8,
				borderRadius: 4,
				backgroundColor: '#EF4444',
			}}
		/>
	)}
</View>

Download

<HeaderButton icon="download-outline" onPress={handleDownload} disabled={isDownloading} />

Delete

<HeaderButton icon="trash-outline" onPress={handleDelete} iconColor="#EF4444" />

Favorite

<HeaderButton
	icon={isFavorite ? 'heart' : 'heart-outline'}
	onPress={toggleFavorite}
	iconColor={isFavorite ? '#EF4444' : '#6B7280'}
/>

Styling Patterns

With Margin

<HeaderButton icon="search" onPress={handleSearch} style={{ marginRight: 8 }} />

Larger Touch Target

<HeaderButton
	icon="close"
	onPress={handleClose}
	hitSlop={{ top: 15, bottom: 15, left: 15, right: 15 }}
/>

Custom Padding

<HeaderButton icon="settings" onPress={handleSettings} style={{ padding: 12 }} />

Notes

• Perfect for header actions
• Hit slop ensures easy tapping
• Works well with Icon component
• Use consistent icon sizes across headers
• Combine multiple buttons with gap/spacing
• Consider disabled state for unavailable actions
• Press feedback is automatic