ContextQMD
Back to Chakra Ui

Badge

apps/www/content/docs/components/badge.mdx

0.3.0-beta468 B
Original Source
<ExampleTabs name="badge-basic" />

Usage

jsx
import { Badge } from "@chakra-ui/react"
jsx
<Badge>Badge</Badge>

Examples

Icon

Render an icon within the badge directly

<ExampleTabs name="badge-with-icon" />

Variants

Badges come in different variants

<ExampleTabs name="badge-with-variants" />

Sizes

Badges come in different sizes

<ExampleTabs name="badge-with-sizes" />

Props

<PropTable component="Badge" part="Badge" />