Badge

Display to indicate status or feat of service

Usage

Colors

neutral

blue

red

orange

yellow

green

teal

purple

<Box flexDirection="row">
  <Badge title="neutral" color="neutral" />
  <Badge title="blue" color="blue" />
  <Badge title="red" color="red" />
  <Badge title="orange" color="orange" />
  <Badge title="yellow" color="yellow" />
  <Badge title="green" color="green" />
  <Badge title="teal" color="teal" />
  <Badge title="purple" color="purple" />
</Box>

<Box flexDirection="row">
  <Badge title="neutral" color="neutral" />
  <Badge title="blue" color="blue" />
  <Badge title="red" color="red" />
  <Badge title="orange" color="orange" />
  <Badge title="yellow" color="yellow" />
  <Badge title="green" color="green" />
  <Badge title="teal" color="teal" />
  <Badge title="purple" color="purple" />
</Box>

Solid colors

neutral

blue

red

orange

yellow

green

teal

purple

<Box flexDirection="row">
  <Badge title="neutral" color="neutral" isSolid />
  <Badge title="blue" color="blue" isSolid />
  <Badge title="red" color="red" isSolid />
  <Badge title="orange" color="orange" isSolid />
  <Badge title="yellow" color="yellow" isSolid />
  <Badge title="green" color="green" isSolid />
  <Badge title="teal" color="teal" isSolid />
  <Badge title="purple" color="purple" isSolid />
</Box>

<Box flexDirection="row">
  <Badge title="neutral" color="neutral" isSolid />
  <Badge title="blue" color="blue" isSolid />
  <Badge title="red" color="red" isSolid />
  <Badge title="orange" color="orange" isSolid />
  <Badge title="yellow" color="yellow" isSolid />
  <Badge title="green" color="green" isSolid />
  <Badge title="teal" color="teal" isSolid />
  <Badge title="purple" color="purple" isSolid />
</Box>

Sizes

small

medium

large

<Box flexDirection="row">
  <Badge title="small" size="small" />
  <Badge title="medium" size="medium" />
  <Badge title="large" size="large" />
</Box>

<Box flexDirection="row">
  <Badge title="small" size="small" />
  <Badge title="medium" size="medium" />
  <Badge title="large" size="large" />
</Box>

Shapes

square

rounded

pill

circle

<Box flexDirection="row">
  <Badge title="square" shape="square" />
  <Badge title="rounded" shape="rounded" />
  <Badge title="pill" shape="pill" />
  <Badge title="circle" shape="circle" />
</Box>

<Box flexDirection="row">
  <Badge title="square" shape="square" />
  <Badge title="rounded" shape="rounded" />
  <Badge title="pill" shape="pill" />
  <Badge title="circle" shape="circle" />
</Box>

Props

overrides

Partial<{ root: overridewithstyle<badgebaseprops, rootprops, styleprop<viewstyle>>; title: overridewithstyle<badgebaseprops, titleprops, style<textprops, textstyle>>; }> | undefined

title

Optionalstring

color

"neutral"

size

Number | "small" | "medium" | "large" | undefined

"medium"

shape

"rounded"

isSolid

Boolean | undefined

false

testID

String | undefined

Overrides

export interface BadgeOverrides {
  Root: RootProps;
  Title: TitleProps;
}