React Native Mantine › Data display
Indicator
Notification dot indicator
Import: import { Indicator } from 'react-native-mantine';
Usage
import { Indicator, Text } from 'react-native-mantine';
<Indicator label="new" color="red" size="md" position="top-end" withBorder>
<Text style={{ padding: 16 }}>Content with indicator</Text>
</Indicator>Props
| Prop | Type | Default | Description |
|---|---|---|---|
color | MantineColor | 'red' | Indicator color from theme |
size | MantineSize | number | 'md' | Indicator size |
radius | MantineNumberSize | 'xl' | Indicator border radius |
withBorder | boolean | false | If true, indicator will have a border |
position | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'top-center' | 'bottom-center' | 'middle-start' | 'middle-end' | 'middle-center' | 'top-end' | Indicator position |
offset | number | 0 | Indicator offset |
label | React.ReactNode | Indicator label | |
disabled | boolean | false | Disable indicator |
inline | boolean | false | If true, only the indicator is rendered without wrapping children |
processing | boolean | false | Marks the indicator as processing (accepted for Mantine parity, no visual effect yet) |
withPulse | boolean | false | If true, indicator will have a pulsing animation |
children | React.ReactNode | Children wrapped by indicator | |
style | any | Additional styles | |
testID | string | Test identifier used by testing frameworks |