# Badge

Small label for displaying status, categories, or counts

## Example[​](#example "Direct link to Example")

<!-- -->

```tsx
import { Badge } from "@databricks/appkit-ui/react"

export default function BadgeExample() {
  return <Badge>Badge</Badge>
}

```

## Badge[​](#badge-1 "Direct link to Badge")

Small label for displaying status, categories, or counts

**Source:** [`packages/appkit-ui/src/react/ui/badge.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/badge.tsx)

### Props[​](#props "Direct link to Props")

| Prop      | Type                                                             | Required | Default | Description |
| --------- | ---------------------------------------------------------------- | -------- | ------- | ----------- |
| `variant` | `"default" \| "destructive" \| "secondary" \| "outline" \| null` |          | -       | -           |
| `asChild` | `boolean`                                                        |          | `false` | -           |

### Usage[​](#usage "Direct link to Usage")

```tsx
import { Badge } from '@databricks/appkit-ui';

<Badge /* props */ />

```