MultinaireButton

Primary action button with multiple color variants.

Import

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

Usage

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

Props

Prop	Type	Default	Description
type	ButtonType	'primary'	Color variant of the button. Defaults to 'primary'
title	string	—	Button label text
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
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

ButtonType

type ButtonType =
  | 'primary'    // Theme primary color
  | 'secondary'  // Theme secondary color
  | 'surface'    // Background variant color (subtle)
  | 'success'    // Theme success color
  | 'warning'    // Theme warning color
  | 'error'      // Theme error color
  | 'destructive' // @deprecated — use 'error' instead

Variants

Primary

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

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

Secondary

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

Surface

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

Surface buttons use the background variant color. Use for low-emphasis actions.

Success

<MultinaireButton type="success" title="Confirm" />

Warning

<MultinaireButton type="warning" title="Proceed with Caution" />

Error

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

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={8}>
  <MultinaireInput
    placeholder="Email"
    value={email}
    onChangeText={setEmail}
  />
  <MultinaireButton
    type="primary"
    title="Sign Up"
    isLoading={isSubmitting}
    onPress={handleSubmit}
  />
</MultinaireContainer>

Action Buttons

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

Migration

The 'destructive' type is deprecated. Replace it with 'error':

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

// After
<MultinaireButton type="error" title="Delete" />