---
title: Badge
description: Render compact status and category labels
type: reference
summary: Import Badge from the package component subpath for labels outside authored MDX.
url: /docs/components/badge
source: apps/template/content/docs/components/badge.mdx
related:
  - /docs/components
---

# Badge

import { Badge } from "@vercel/geistdocs/components/badge";

<div className="not-prose my-6 flex min-h-32 items-center justify-center rounded-lg border border-gray-400 bg-background-100 p-6">
  <Badge variant="blue">New</Badge>
</div>

Import `Badge` from the selected Geistdocs package:

```tsx
import { Badge } from "@vercel/geistdocs/components/badge";

export function Status() {
  return <Badge variant="blue">New</Badge>;
}
```

The public variant supports `gray`, `blue`, `red`, `amber`, and `green` tones. The private package resolves the component through Geistcn.