MultinaireMenuButton

List-item style button for menu items and settings rows. Supports a leading icon, title, value display, and trailing icon.

Basic Usage

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

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

Props

Prop	Type	Default	Description
title	string	—	Button label text
type	'default' | 'warning' | 'error'	'default'	⚠️ Deprecated. Color variant that controls the foreground (text and icon) color
leading	IconName	—	Icon name displayed at the leading (left) end of the button
trailing	IconName	—	Icon name displayed at the trailing (right) end of the button
value	string	—	Value string rendered between the title and the trailing icon. Useful for showing a current selection
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

Examples

Settings Menu

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

With Value

<MultinaireMenuButton
  leading="Global"
  title="Language"
  value="English"
  trailing="ArrowRight2"
  onPress={() => openLanguagePicker()}
/>

Destructive Action

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

Warning Action

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