Badge

Status badge with color variants

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

Usage

import { Badge } from 'react-native-mantine';

<Badge
  variant="filled"
  color="blue"
  size="md"
>
  New
</Badge>

Prop	Type	Default	Description
`color`	`MantineColor`	`"blue"`	Badge color from theme (e.g., "blue", "red", "green", "orange", "grape")
`variant`	`'filled' \| 'light' \| 'outline' \| 'dot'`	`"light"`	Controls badge appearance - filled (solid background), light (subtle background), outline (border only), or dot (with colored dot indicator)
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`"md"`	Badge size that controls font size, height, and padding
`radius`	`number \| "xs" \| "sm" \| "md" \| "lg" \| "xl"`	`"xl"`	Key of theme.radius or any valid number to set border-radius
`fullWidth`	`boolean`	`false`	Sets badge width to 100% of parent element
`leftSection`	`React.ReactNode`		Section displayed on the left side of badge (e.g., icon or custom component)
`rightSection`	`React.ReactNode`		Section displayed on the right side of badge (e.g., icon or custom component)
`children`	`React.ReactNode`		Badge label content, usually text but can be any React node
`withTextWrapper`	`boolean`	`true`	Controls whether children are automatically wrapped in a Text component
`style`	`ViewStyle`		Additional styles to apply to the badge container