ActionButton

Button with an icon and label, ideal for primary actions. Supports all ButtonType color variants.

Basic Usage

import { ActionButton } from '@multinaire/expo-ui';

<ActionButton icon="Add" title="Add Item" onPress={() => {}} />

Props

Prop	Type	Default	Description
title	string	—	Button label text
icon	IconName	—	Icon name displayed alongside the title
type	ButtonType	'primary'	Color variant of the button. Defaults to 'primary'
reversed	boolean	false	When true, the icon is placed after the title instead of before
flex	number	—	Flex grow value
width	DimensionValue	—	Fixed width of the button
height	DimensionValue	theme medium	Fixed height of the button. Defaults to the theme's medium height
margin	SpacingProps	—	Outer margin
isLoading	boolean	false	Show a loading animation and disable the button
testID	string	title	Test identifier for UI automation. Defaults to the title value
onPress	() => void	—	Press handler. When omitted the button renders in a disabled (dimmed) state

See ButtonType for all available type values.

Examples

Button Types

<ActionButton type="primary" icon="Add" title="Create" onPress={() => {}} />
<ActionButton type="secondary" icon="Edit2" title="Edit" onPress={() => {}} />
<ActionButton type="surface" icon="Eye" title="Preview" onPress={() => {}} />
<ActionButton type="success" icon="TickCircle" title="Confirm" onPress={() => {}} />
<ActionButton type="warning" icon="InfoCircle" title="Caution" onPress={() => {}} />
<ActionButton type="error" icon="Trash" title="Delete" onPress={() => {}} />

Reversed Icon Position

<ActionButton
  icon="ArrowRight2"
  title="Continue"
  reversed
  onPress={() => {}}
/>

Full Width

<ActionButton width="100%" icon="Send2" title="Submit" onPress={() => {}} />

Loading State

<ActionButton icon="DocumentUpload" title="Uploading..." isLoading onPress={() => {}} />

Migration

The 'destructive' type is deprecated. Replace it with 'error':

// Before
<ActionButton type="destructive" icon="Trash" title="Delete" />

// After
<ActionButton type="error" icon="Trash" title="Delete" />