---
title: Badge
description: Used to highlight an item's status for quick recognition.
links:
  source: components/badge
  storybook: components-badge--basic
  recipe: badge
---

<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" />
