React Native Mantine › Theming

Component Variants

Guide to all 8 built-in component variants

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

Usage

import { Button, Badge, ActionIcon } from 'react-native-mantine';

// Buttons
<Button variant="filled" color="blue">Filled</Button>
<Button variant="light" color="green">Light</Button>
<Button variant="outline" color="red">Outline</Button>
<Button variant="subtle" color="violet">Subtle</Button>
<Button variant="white" color="orange">White</Button>
<Button variant="default">Default</Button>
<Button variant="transparent" color="cyan">Transparent</Button>

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

// Badges
<Badge variant="filled" color="blue">Badge</Badge>
<Badge variant="light" color="green">Badge</Badge>
<Badge variant="outline" color="red">Badge</Badge>

// ActionIcon
<ActionIcon variant="filled" color="blue">
  <Icon name="heart" />
</ActionIcon>

Source on GitHub · npm