---
title: Badge
description: "Displays a badge or a component that looks like a badge."
---

```tsx
import { Badge } from '@/components/ui/badge';

export default function BadgeDemo() {
  return <Badge>Badge</Badge>;
}
```

## Install

```bash
npx shadcn@latest add @madeui/badge
```

## Usage

```tsx
import { Badge } from '@/components/ui/badge';

<Badge variant="outline">Badge</Badge>
```

## Variants

```tsx
import * as stylex from '@stylexjs/stylex';

import { space } from '@/lib/constants.stylex';

import { Badge } from '@/components/ui/badge';

export default function BadgeVariants() {
  return (
    <div {...stylex.props(styles.row)}>
      <Badge variant="secondary">Secondary</Badge>
      <Badge variant="outline">Outline</Badge>
      <Badge variant="destructive">Destructive</Badge>
    </div>
  );
}

const styles = stylex.create({
  row: {
    alignItems: 'center',
    display: 'flex',
    flexWrap: 'wrap',
    gap: space.s2,
  },
});
```

## With icon

```tsx
import { Badge } from '@/components/ui/badge';

export default function BadgeIcon() {
  return (
    <Badge variant="secondary">
      <svg width="12" height="12" viewBox={`0 0 12 12`} fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
        <path d={`M10.5 3 4.5 9 1.5 6`} />
      </svg>
      Verified
    </Badge>
  );
}
```

## With spinner

```tsx
import { Badge } from '@/components/ui/badge';
import { Spinner } from '@/components/ui/spinner';

export default function BadgeSpinner() {
  return (
    <Badge variant="secondary">
      <Spinner width="12" height="12" />
      Syncing
    </Badge>
  );
}
```

## Link

Pass a `render` element to render the badge as a different element, such as a link.

```tsx
import { Badge } from '@/components/ui/badge';

export default function BadgeLink() {
  return (
    <Badge variant="secondary" render={<a href="#" />}>
      New release
    </Badge>
  );
}
```

## API reference

### Badge

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `'primary' \| 'secondary' \| 'outline' \| 'ghost' \| 'destructive'` | `'primary'` | Visual style. |
| `render` | `ReactElement \| (props, state) => ReactElement` | — | Renders the badge as a different element (e.g. an `<a>`) while keeping the badge styling. |
| `style` | `StyleXStyles` | — | StyleX styles merged last — always win over the component's own styles. |