MultinaireActionButton

Button with icon and label, ideal for primary actions.

Basic Usage

import { MultinaireActionButton } from '@multinaire/multinaire-design';

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

Props

Prop	Type	Default	Description
title	string	-	Button label text
icon	MultinaireIcons	-	Icon to display
type	'primary' | 'surface' | 'destructive'	'primary'	Button style variant
reversed	boolean	false	Place icon after text
flex	number	-	Flex value
width	DimensionValue	-	Button width
height	DimensionValue	-	Button height
margin	SpacingProps	-	Margin spacing
isLoading	boolean	false	Show loading state
onPress	() => void	-	Press handler

Examples

Button Types

<MultinaireActionButton
  type="primary"
  icon="Plus"
  title="Create"
  onPress={() => {}}
/>
<MultinaireActionButton
  type="surface"
  icon="Edit"
  title="Edit"
  onPress={() => {}}
/>
<MultinaireActionButton
  type="destructive"
  icon="Trash"
  title="Delete"
  onPress={() => {}}
/>

Reversed Icon Position

<MultinaireActionButton
  icon="ArrowRight"
  title="Continue"
  reversed
  onPress={() => {}}
/>

Full Width

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

Loading State

<MultinaireActionButton
  icon="Upload"
  title="Uploading..."
  isLoading
  onPress={() => {}}
/>