Badge

Component to highlight an item's status for quick recognition.

Import

import { Badge } from 'react-native-ficus-ui';

Usage

Change color scheme

EDITABLE EXAMPLE

<HStack spacing="md">
  <Badge>New</Badge>
  <Badge colorScheme="green">New</Badge>
  <Badge colorScheme="red">New</Badge>
  <Badge colorScheme="orange">New</Badge>
  <Badge colorScheme="purple">New</Badge>
  <Badge colorScheme="pink">New</Badge>
</HStack>

Change font size

EDITABLE EXAMPLE

<HStack spacing="md">
  <Badge size="xs">New</Badge>
  <Badge colorScheme="green" size="sm">
    New
  </Badge>
  <Badge colorScheme="red" size="md">
    New
  </Badge>
  <Badge colorScheme="orange" size="lg">
    New
  </Badge>
  <Badge colorScheme="purple" size="xl">
    New
  </Badge>
  <Badge colorScheme="pink" size="2xl">
    New
  </Badge>
</HStack>

Variants

EDITABLE EXAMPLE

<HStack spacing="md">
  <Badge variant="outline" colorScheme="green" fontSize="xl">
    Outline
  </Badge>
  <Badge variant="solid" colorScheme="green" fontSize="xl">
    Solid
  </Badge>
  <Badge variant="subtle" colorScheme="green" fontSize="xl">
    Subtle
  </Badge>
</HStack>

Props

Extends every Box and Text props.

`colorScheme`

The colorScheme property, will define background color and text color.

Type	Required	Default
string	No	`gray`

`variant`

The variant of the Badge.

Type	Required	Default
`solid` \|`subtle` \|`outline`	No	`outline`

Avatar Text