MultinaireIconButton

Icon-only button for compact actions with theme-aware styling.

Basic Usage

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

<MultinaireIconButton icon="Settings" onPress={() => {}} />

Props

Prop	Type	Default	Description
icon	IconName	—	Icon name displayed inside the button
type	ButtonType	'primary'	Color variant of the button. Defaults to 'primary'
margin	SpacingProps	—	Outer margin
isLoading	boolean	false	Show a loading animation and disable the button
onPress	() => void	—	Press handler

See ButtonType for all available type values.

Examples

Button Types

<MultinaireIconButton type="primary" icon="Add" onPress={() => {}} />
<MultinaireIconButton type="surface" icon="Edit" onPress={() => {}} />
<MultinaireIconButton type="destructive" icon="Delete" onPress={() => {}} />

In a Header

<MultinaireContainer horizontal justifyContent="space-between">
  <MultinaireIconButton icon="Back" onPress={() => navigation.goBack()} />
  <MultinaireIconButton icon="More" onPress={() => showMenu()} />
</MultinaireContainer>

Loading State

<MultinaireIconButton icon="Save" isLoading onPress={() => {}} />

With Margin

<MultinaireIconButton
  icon="Share"
  margin={{ left: 8 }}
  onPress={() => share()}
/>