Badge

Badges are used to highlight an item's status for quick recognition.

Import#

import { Badge } from "@chakra-ui/core";

import { Badge } from "@chakra-ui/core";

Usage#

Default

<Badge>Default</Badge>

<Badge>Default</Badge>

Editable Example

Badge Color#

Pass the variantColor prop to customize the color of the Badge. variantColor can be any color key that exists in the theme.colors. Learn more about theming.

Default

Success

Removed

New

<Stack isInline>
  <Badge>Default</Badge>
  <Badge variantColor="green">Success</Badge>
  <Badge variantColor="red">Removed</Badge>
  <Badge variantColor="purple">New</Badge>
</Stack>

<Stack isInline>
  <Badge>Default</Badge>
  <Badge variantColor="green">Success</Badge>
  <Badge variantColor="red">Removed</Badge>
  <Badge variantColor="purple">New</Badge>
</Stack>

Editable Example

Badge Variants#

Pass the variant prop and set to either subtle, solid, or outline to get a different style.

Default

Success

Removed

<Stack isInline>
  <Badge variant="outline" variantColor="green">
    Default
  </Badge>
  <Badge variant="solid" variantColor="green">
    Success
  </Badge>
  <Badge variant="subtle" variantColor="green">
    Removed
  </Badge>
</Stack>

<Stack isInline>
  <Badge variant="outline" variantColor="green">
    Default
  </Badge>
  <Badge variant="solid" variantColor="green">
    Success
  </Badge>
  <Badge variant="subtle" variantColor="green">
    Removed
  </Badge>
</Stack>

Editable Example

Composition#

Segun Adebayo

New

UI Engineer

<Flex>
  <Avatar src="https://bit.ly/sage-adebayo" />
  <Box ml="3">
    <Text fontWeight="bold">
      Segun Adebayo
      <Badge ml="1" variantColor="green">
        New
      </Badge>
    </Text>
    <Text fontSize="sm">UI Engineer</Text>
  </Box>
</Flex>

<Flex>
  <Avatar src="https://bit.ly/sage-adebayo" />
  <Box ml="3">
    <Text fontWeight="bold">
      Segun Adebayo
      <Badge ml="1" variantColor="green">
        New
      </Badge>
    </Text>
    <Text fontSize="sm">UI Engineer</Text>
  </Box>
</Flex>

Editable Example

You can also change the size of the badge by passing fontSize prop.

Segun Adebayo

New

<Text fontSize="xl" fontWeight="bold">
  Segun Adebayo
  <Badge ml="1" fontSize="0.8em" variantColor="green">
    New
  </Badge>
</Text>

<Text fontSize="xl" fontWeight="bold">
  Segun Adebayo
  <Badge ml="1" fontSize="0.8em" variantColor="green">
    New
  </Badge>
</Text>

Editable Example

Props#

The Badge component composes Box component so you can pass props for Box.

Name	Type	Default	Description
`variant`	`solid`, `subtle`, `outline`	`subtle`	The style variant of the badge
`variantColor`	`string`	`gray`	The color scheme to use for the badge. Must be a key in `theme.colors`

Proudly made in 🇳🇬

Released under the MIT License.

Badge

.css-12m0k8p{pointer-events:auto;}Import.css-18hqai{color:#319795;font-weight:400;outline:none;opacity:0;margin-left:0.375rem;}.css-18hqai:focus{opacity:1;box-shadow:0 0 0 3px rgba(66,153,225,0.6);}#

Usage#

Badge Color#

Badge Variants#

Composition#

Props#

Import#