Button

Full-featured interactive button

Import: import { Button } from 'react-native-mantine';

Usage

import { Button } from 'react-native-mantine';

<Button
  variant="filled"
  color="blue"
  size="md"
  onPress={() => console.log('Clicked!')}
>
  Click Me
</Button>

// With loading state
<Button
  loading={isLoading}
  loaderPosition="left"
  onPress={handleSubmit}
>
  Submit
</Button>

// Gradient button
<Button
  variant="gradient"
  gradient={{ from: 'blue', to: 'cyan', deg: 45 }}
>
  Gradient Button
</Button>

Props

Prop	Type	Default	Description
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'sm'`	Predefined button size that controls padding, font size, and height
`variant`	`'filled' \| 'outline' \| 'light' \| 'white' \| 'default' \| 'subtle' \| 'gradient'`	`'filled'`	Controls button appearance and visual style
`color`	`MantineColor`	`theme.primaryColor`	Button color from theme (e.g., "blue", "red", "green", "orange", "grape")
`fullWidth`	`boolean`	`false`	Sets button width to 100% of parent element
`radius`	`number \| "xs" \| "sm" \| "md" \| "lg" \| "xl"`	`theme.defaultRadius`	Key of theme.radius or any valid number to set border-radius
`leftIcon`	`React.ReactNode`		Adds icon before button label
`rightIcon`	`React.ReactNode`		Adds icon after button label
`uppercase`	`boolean`	`false`	Set text-transform to uppercase
`compact`	`boolean`	`false`	Reduces vertical and horizontal spacing
`loading`	`boolean`	`false`	Indicate loading state with an activity indicator
`loaderPosition`	`'left' \| 'right' \| 'center'`	`'left'`	Loader position relative to button label
`loaderProps`	`LoaderProps`		Props spread to Loader component
`disabled`	`boolean`	`false`	Disabled state - prevents interaction and shows disabled styling
`gradient`	`MantineGradient`		Controls gradient settings in gradient variant only. Object with from, to, and deg properties
`children`	`React.ReactNode`		Button label content
`onPress`	`() => void`		Function called when button is pressed
`style`	`ViewStyle`		Additional styles to apply to the button

Source on GitHub · npm