React Native Mantine › Data display
Pill
Removable tag pill
Import: import { Pill } from 'react-native-mantine';
Usage
import { Pill } from 'react-native-mantine';
<Pill
withRemoveButton
onRemove={() => removeTag('react')}
size="md"
>
React
</Pill>
// With Group
<Pill.Group gap="xs">
<Pill>React</Pill>
<Pill>React Native</Pill>
<Pill disabled>Disabled</Pill>
</Pill.Group>Props
| Prop | Type | Default | Description |
|---|---|---|---|
children (required) | React.ReactNode | Pill components to be rendered within the group | |
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | Controls size of all pills inside the group | |
gap | number | "xs" | "sm" | "md" | "lg" | "xl" | "xs" | Gap between pills |
disabled | boolean | If set, all pills inside the group are disabled | |
style | ViewStyle | Additional styles to apply to the group container |