Skip to main content

Documentation Index

Fetch the complete documentation index at: https://copylabs.mintlify.app/llms.txt

Use this file to discover all available pages before exploring further.

​
Badge

Badge is a data display component for rendering status indicators and labels.

​
Import

import { Badge } from 'radix-native-ui';

​
Usage

import { Badge } from 'radix-native-ui';

<Badge color="green">Active</Badge>

​
Props

​
Examples

​
Variants

<Flex direction="row" gap={2}>
  <Badge variant="solid">Solid</Badge>
  <Badge variant="soft">Soft</Badge>
  <Badge variant="surface">Surface</Badge>
  <Badge variant="outline">Outline</Badge>
</Flex>

​
Colors

<Flex direction="row" gap={2} wrap="wrap">
  <Badge color="green">Success</Badge>
  <Badge color="red">Error</Badge>
  <Badge color="yellow">Warning</Badge>
  <Badge color="blue">Info</Badge>
  <Badge color="gray">Neutral</Badge>
</Flex>

​
Sizes

<Flex direction="row" gap={2} align="center">
  <Badge size={1}>Small</Badge>
  <Badge size={2}>Medium</Badge>
  <Badge size={3}>Large</Badge>
  <Badge size={4}>Extra Large</Badge>
</Flex>

​
High Contrast

<Flex direction="row" gap={2}>
  <Badge color="blue">Normal</Badge>
  <Badge color="blue" highContrast>High Contrast</Badge>
</Flex>

​
Status Indicators

<Flex direction="column" gap={2}>
  <Flex direction="row" gap={2} align="center">
    <Badge color="green">Active</Badge>
    <Text>Account is active</Text>
  </Flex>
  <Flex direction="row" gap={2} align="center">
    <Badge color="yellow">Pending</Badge>
    <Text>Verification pending</Text>
  </Flex>
  <Flex direction="row" gap={2} align="center">
    <Badge color="red">Suspended</Badge>
    <Text>Account suspended</Text>
  </Flex>
</Flex>

​
With Avatar

<Flex direction="row" gap={3} align="center">
  <Avatar fallback="JD" />
  <Flex direction="column">
    <Flex direction="row" gap={2} align="center">
      <Text weight="medium">John Doe</Text>
      <Badge size={1} color="green">Pro</Badge>
    </Flex>
    <Text size={2} color="gray">john@example.com</Text>
  </Flex>
</Flex>