IconButton

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

Basic Usage

import { IconButton } from '@multinaire/ui';

<IconButton 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
testID	string	—	Test identifier for UI automation
onPress	() => void	—	Press handler

See ButtonType for all available type values.

Examples

Button Types

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

In a Header

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

Loading State

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

With Margin

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