---
title: Badge
description: Badges are used to display small pieces of information or status indicators in a compact, visually distinct way.
category: Display
related: [Text, Icon, Button, Table]
commonPatterns: [status-indicator, notification-badge, count-badge]
---

Source: https://clickhouse.design/click-ui/badge

# Badge

Badges are used to display important information or status in a compact, visually distinct way. They can be used to show counts, status indicators, or important labels.

## Example

## Props

| Prop            | Type                                                                                   | Default value | Description                                                   |
| --------------- | -------------------------------------------------------------------------------------- | ------------- | ------------------------------------------------------------- |
| text            | `ReactNode`                                                                            | `undefined`   | The text or content to display in the badge                   |
| state           | `"default" \| "success" \| "neutral" \| "danger" \| "disabled" \| "warning" \| "info"` | `"default"`   | The visual state of the badge                                 |
| size            | `"sm" \| "md"`                                                                         | `"md"`        | The size of the badge                                         |
| type            | `"opaque" \| "solid"`                                                                  | `"opaque"`    | The visual type of the badge                                  |
| icon            | `IconName`                                                                             | `undefined`   | Icon name to display in the badge                             |
| iconDir         | `"left" \| "right"`                                                                    | `"left"`      | Direction of the icon relative to the text                    |
| dismissible     | `boolean`                                                                              | `false`       | Whether the badge can be dismissed with a close button        |
| onClose         | `(e: MouseEvent<HTMLOrSVGElement>) => void`                                            | `undefined`   | Callback function called when the dismissible badge is closed |
| ellipsisContent | `boolean`                                                                              | `false`       | Whether to truncate long content with ellipsis                |

```tsx
import { Badge } from '@clickhouse/click-ui'

<Badge 
text="Example"
state="success"
size="sm"
icon="star"
dismissible
onClose={() => {}}
/>
```

## Quick start

Use Badge to display status or labels:

```tsx
<Badge text="New" state="success" />
<Badge text="Warning" state="warning" />
<Badge text="Error" state="danger" />
```

## Related components

- **Text**: Use Text for regular text content alongside badges
- **Icon**: Use Icon inside badges for visual indicators
- **Button**: Use badges with buttons to show counts or status
- **Table**: Use badges in table cells to show status

## Common use cases

### Status indicator

```tsx
import { Badge } from '@clickhouse/click-ui'

function StatusBadge() {
return (
  <Badge text="Active" state="success" />
)
}
```

### Badge with Icon

```tsx
import { Badge } from '@clickhouse/click-ui'

function IconBadge() {
return (
  <Badge text="Starred" icon="star" state="warning" />
)
}
```

### Dismissible badge

```tsx
import { Badge } from '@clickhouse/click-ui'
import { useState } from 'react'

function DismissibleBadge() {
const [show, setShow] = useState(true)

if (!show) return null

return (
  <Badge 
    text="Dismissible" 
    dismissible 
    onClose={() => setShow(false)} 
  />
)
}
```

## Variants

### States

Default

Success

Warning

Danger

Info

Neutral

Disabled

### Types

Solid

Opaque

### Sizes

Small

Medium

### With icons

Left Icon

Right Icon

### Dismissible

Dismissible