Badge
Badge component of the UILaunch design system, how to import it and its usage.
🏷️ Badge
The Badge component is a small, often circular, visual indicator that can be used to display a count or status. It is commonly used in notifications, messages, or to highlight important information. It can be used to show the number of unread messages, notifications, or any other count that needs to be displayed prominently. It is a simple yet effective way to draw attention to specific information in your application.
📦 Import
import Badge from '@madefordevs1999/ui-launch-native/system/atoms/Badge';🧩 Usage
import Badge, { BadgeSizeEnum, BadgeTypeEnum, BadgeVariantEnum } from '@madefordevs1999/ui-launch-native/system/atoms/Badge';
import { View } from 'react-native';
const App = () => {
return (
<View style={{ padding: 20 }}>
<Badge
colorVariant={BadgeVariantEnum.Primary}
size={BadgeSizeEnum.Large}
type={BadgeTypeEnum.Solid}
rounded
>
99+
</View>
);
};
export default App;Results
📜 Props
| Prop Name | Type | Default Value | Description |
|---|---|---|---|
| bordered | boolean | false | If true, the badge will have a border white to separate the background from the badge background. |
| colorVariant | BadgeVariantEnum | Primary | The color variant of the badge. |
| size | BadgeSizeEnum | Medium | The size of the badge. |
| type | BadgeTypeEnum | Solid | The type of the badge. |
| rounded | boolean | false | If true, the badge will have rounded corners. |
| onPress | () => void | undefined | Function to be called when the badge is pressed. |