MultinaireMenuButton

List item style button for menu items and settings rows.

Basic Usage

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

<MultinaireMenuButton
  leading="Settings"
  title="Settings"
  onPress={() => {}}
/>

Props

Prop	Type	Default	Description
title	string	-	Button label text
type	'default' | 'warning' | 'error'	'default'	Button style variant
leading	MultinaireIcons	-	Leading icon
trailing	MultinaireIcons	-	Trailing icon
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

Settings Menu

<MultinaireContainer>
  <MultinaireMenuButton
    leading="User"
    title="Profile"
    trailing="ChevronRight"
    onPress={() => navigation.navigate('Profile')}
  />
  <MultinaireMenuButton
    leading="Bell"
    title="Notifications"
    trailing="ChevronRight"
    onPress={() => navigation.navigate('Notifications')}
  />
  <MultinaireMenuButton
    leading="Shield"
    title="Privacy"
    trailing="ChevronRight"
    onPress={() => navigation.navigate('Privacy')}
  />
</MultinaireContainer>

Destructive Action

<MultinaireMenuButton
  type="error"
  leading="Logout"
  title="Sign Out"
  onPress={() => signOut()}
/>

Warning Action

<MultinaireMenuButton
  type="warning"
  leading="AlertTriangle"
  title="Clear Cache"
  onPress={() => clearCache()}
/>

Without Icons

<MultinaireMenuButton
  title="Terms of Service"
  trailing="ExternalLink"
  onPress={() => openURL(termsUrl)}
/>