Action Components

Action components are interactive elements that trigger operations when pressed. Both components share a consistent variant and size system, use useAnimatedPress for tactile press feedback, and respect the theme’s semantic color tokens.


import { Button, IconButton } from '@/common/components';

Button

A versatile button component with four visual variants, three sizes, loading state, and optional leading/trailing icons. Extends React Native’s PressableProps.

Basic Usage


<Button title="Submit" onPress={handleSubmit} />
 
<Button title="Secondary" variant="secondary" onPress={handlePress} />
 
<Button title="Outline" variant="outline" size="sm" onPress={handlePress} />
 
<Button title="Ghost" variant="ghost" onPress={handlePress} />

With Icons


import { Icon } from '@/common/components';
 
<Button
  title="Add Item"
  leftIcon={<Icon name="add-outline" size={18} variant="inverse" />}
  onPress={handleAdd}
/>
 
<Button
  title="Next"
  rightIcon={<Icon name="arrow-forward-outline" size={18} variant="inverse" />}
  onPress={handleNext}
/>

Loading State

When loading is true, the button displays a spinner and disables interaction.


<Button title="Saving..." loading onPress={handleSave} />

Full Width


<Button title="Sign In" fullWidth onPress={handleSignIn} />

Variants

Variant	Description
`primary`	Solid brand-colored background (default)
`secondary`	Muted background for secondary actions
`outline`	Transparent with a border
`ghost`	Transparent with no border, text only

Sizes

Size	Description
`sm`	Compact — reduced padding and font size
`md`	Standard size (default)
`lg`	Large — increased padding and font size

Props

Prop	Type	Default	Description
`title`	`string`	required	Text label displayed inside the button
`variant`	`'primary' \| 'secondary' \| 'outline' \| 'ghost'`	`'primary'`	Visual style variant
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size of the button
`loading`	`boolean`	`false`	Show a spinner and disable interaction
`disabled`	`boolean`	`false`	Disable the button
`fullWidth`	`boolean`	`false`	Stretch to fill container width
`leftIcon`	`ReactNode`	—	Icon element rendered before the title
`rightIcon`	`ReactNode`	—	Icon element rendered after the title
`onPress`	`() => void`	—	Press handler (inherited from PressableProps)

Button extends PressableProps (excluding children), so you can pass any standard pressable prop such as accessibilityLabel, testID, or hitSlop.

IconButton

A compact, icon-only button that shares the same variant and size system as Button. Ideal for toolbar actions, close buttons, and navigation controls.

Basic Usage


<IconButton
  icon="close-outline"
  accessibilityLabel="Close"
  onPress={handleClose}
/>
 
<IconButton
  icon="settings-outline"
  variant="primary"
  accessibilityLabel="Settings"
  onPress={handleSettings}
/>

Variants and Sizes


<IconButton icon="heart-outline" variant="outline" size="sm" accessibilityLabel="Like" />
<IconButton icon="trash-outline" variant="ghost" size="lg" accessibilityLabel="Delete" />

Loading State


<IconButton
  icon="refresh-outline"
  loading
  accessibilityLabel="Refreshing"
  onPress={handleRefresh}
/>

Props

Prop	Type	Default	Description
`icon`	`IoniconsName`	required	Ionicons icon name to display
`accessibilityLabel`	`string`	required	Screen reader label (required for accessibility)
`variant`	`'primary' \| 'secondary' \| 'outline' \| 'ghost'`	`'ghost'`	Visual style variant
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size of the button
`loading`	`boolean`	`false`	Show a spinner instead of the icon
`disabled`	`boolean`	`false`	Disable the button
`onPress`	`() => void`	—	Press handler

The accessibilityLabel prop is required on IconButton. Since there is no visible text label, the accessibility label is essential for screen reader users.