Badge
The Badge is used to place a number or text label in a specific position. It's especially useful for notifications or alerts.
Import
import { Badge } from '@tra-tech/react-native-kitra';
Usage
import { Avatar, Chip, Icon } from '@tra-tech/react-native-kitra';
import { View, StyleSheet } from 'react-native';
import Badge from '../../components/Badge';
const App = () => (
<View style={{ alignItems: 'center', flexDirection: 'row' }}>
<Badge containerStyle={{ margin: 10, backgroundColor: '#9A9A9A' }} variant="rectangular" size="medium" icon={<AntDesign name="apple1" color="#fff" />} />
<Badge containerStyle={{ margin: 10, backgroundColor: '#FF3434' }} variant="rectangular" size="medium" icon={<AntDesign name="android1" color="#fff" />} />
</View>
);
const style = StyleSheet.create({
container: { flex: 1, alignItems: 'center', justifyContent: 'center', rowGap: 20 },
});
export default App;
Props
| Prop name | Type | Required | Description |
|---|---|---|---|
| visible | boolean | No | Visibility status. Default value: true |
| label | string | number | No | The number or text to be written in the badge. |
| size | 'small' | 'medium' | No | The size of the badge. Default value: 'medium' |
| containerStyle | StyleProp<ViewStyle> | No | Additional styles to apply to the badge container. |
| labelStyle | StyleProp<TextStyle> | No | Additional styles to apply to the children text. |
| variant | 'circular' | 'rectangular' | No | Specifies the border type of the badge. Default value: 'circular' |
| icon | React.ReactNode | No | Icon to be added to badge. |
| children | React.ReactNode | Yes | A required prop that represents the content to display within the Badge component. |
| position | 'top-right'| 'top-left' | 'bottom-left' | 'bottom-right' | No | Position the Badge component. Default value: 'top-right' |
| theme | UITheme | No | The theme to use for the component. |
| typography | UITypography | No | The typography to use for the component. |