MenuButton

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

Basic Usage

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

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

Props

Prop	Type	Default	Description
title	string	—	Button label text
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
testID	string	title	Test identifier for UI automation. Defaults to the title value
onPress	() => void	—	Press handler. When omitted the button renders in a disabled (dimmed) state

Examples

Settings Menu

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

With Value

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

Destructive Action

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