MultinaireButton

Primary action button with multiple variants.

Import

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

Usage

<MultinaireButton
  type="primary"
  title="Submit"
  onPress={() => console.log('Pressed!')}
/>

Props

Prop	Type	Default	Description
type	'primary' | 'surface' | 'destructive'	'primary'	Button style variant
title	string	-	Button label text
leading	IconName	-	Icon before the title
trailing	IconName	-	Icon after the title
isLoading	boolean	false	Show loading state
disabled	boolean	false	Disable the button
onPress	() => void	-	Press handler
flex	number	-	Flex grow value
width	number	-	Fixed width
height	'small' | 'medium' | 'large' | number	'medium'	Button height
margin	SpacingProps	-	Outer margin

Variants

Primary

<MultinaireButton type="primary" title="Primary Action" />

The primary button uses your theme's primary color. Use for main actions.

Surface

<MultinaireButton type="surface" title="Secondary Action" />

Surface buttons use the background variant color. Use for secondary actions.

Destructive

<MultinaireButton type="destructive" title="Delete" />

Destructive buttons use the error color. Use for delete/remove actions.

With Icons

<MultinaireButton
  type="primary"
  leading="Plus"
  title="Add Item"
/>

<MultinaireButton
  type="surface"
  title="Next"
  trailing="RightArrow"
/>

Loading State

const [loading, setLoading] = useState(false);

<MultinaireButton
  type="primary"
  title="Submit"
  isLoading={loading}
  onPress={async () => {
    setLoading(true);
    await submitForm();
    setLoading(false);
  }}
/>

Full Width

<MultinaireButton
  flex={1}
  type="primary"
  title="Full Width Button"
/>

Examples

Form Submit

<MultinaireContainer gap="medium">
  <MultinaireInput
    placeholder="Email"
    value={email}
    onChangeText={setEmail}
  />
  <MultinaireButton
    type="primary"
    title="Sign Up"
    isLoading={isSubmitting}
    onPress={handleSubmit}
  />
</MultinaireContainer>

Action Buttons

<MultinaireContainer horizontal gap="medium">
  <MultinaireButton
    flex={1}
    type="surface"
    title="Cancel"
    onPress={onCancel}
  />
  <MultinaireButton
    flex={1}
    type="primary"
    title="Confirm"
    onPress={onConfirm}
  />
</MultinaireContainer>