---
title: "Badge"
description: "A small inline label for status or metadata, optionally led by an icon."
canonical_url: "https://sanity-id-docs.sanity.build/sanity-id/components/badge"
md_url: "https://sanity-id-docs.sanity.build/sanity-id/components/badge.md"
docs_index: "https://sanity-id-docs.sanity.build/sanity-id/llms.txt"
version: "1.15.2"
---

> Part of the Sanity ID reference. The index of every page is at https://sanity-id-docs.sanity.build/sanity-id/llms.txt.

# Badge

A small inline label for status or metadata, optionally led by an icon.

```tsx
import { Badge } from "@sanity/sanity-id/components/badge"
```

## Props

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `children` | `ReactNode` | no | — | Content of the badge |
| `className` | `string` | no | — | Additional CSS classes |
| `icon` | `IconSymbol` | no | — | Icon displayed before the text |
| `size` | `"sm" \| "md"` | no | `"md"` | Size of the badge |

## Usage

```tsx
import { Badge } from "@sanity/sanity-id/components/badge"

export default () => {
	return (
		<div className="grid grid-cols-[repeat(2,max-content)] gap-x-32 gap-y-16">
			<Badge icon="component" size="md">Badge with icon (medium)</Badge>
			<Badge size="md">Badge (medium)</Badge>
			<Badge icon="component" size="sm">Badge with icon (small)</Badge>
			<Badge size="sm">Badge (small)</Badge>
		</div>
	)
}
```