Button

Primary action button with multiple color variants.

Import

import { Button } from '@multinaire/expo-ui';

Usage

<Button
  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
testID	string	title	Test identifier for UI automation. Defaults to the title value

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

Variants

Primary

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

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

Secondary

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

Surface

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

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

Success

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

Warning

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

Error

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

Loading State

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

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

Full Width

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

Examples

Form Submit

<Container gap={8}>
  <Input
    placeholder="Email"
    value={email}
    onChangeText={setEmail}
  />
  <Button
    type="primary"
    title="Sign Up"
    isLoading={isSubmitting}
    onPress={handleSubmit}
  />
</Container>

Action Buttons

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

Migration

The 'destructive' type has been removed. Use 'error' instead:

// Before
<Button type="error" title="Delete" />