MultinaireActionButton

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

Basic Usage

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

<MultinaireActionButton 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
onPress	() => void	—	Press handler. When omitted the button renders in a disabled (dimmed) state

See ButtonType for all available type values.

Examples

Button Types

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

Reversed Icon Position

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

Full Width

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

Loading State

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

Migration

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

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

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