managarten/apps/picture/packages/mobile-ui/components/navigation/HeaderButton

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