---
title: Badge
description: A short label on a tinted fill. Marks what is new or what needs attention.
---

```tsx
import { Badge } from "@openperf/deft";

import { Preview } from "../../src/Preview";

export default function BadgeBasic() {
  return (
    <Preview>
      <Badge.Root>Neutral</Badge.Root>
      <Badge.Root tone="accent">Accent</Badge.Root>
      <Badge.Root tone="warning">Warning</Badge.Root>
      <Badge.Root tone="danger">Danger</Badge.Root>
    </Preview>
  );
}
```

- `accent` for New only. `warning` and `danger` for flags on a row: N+1, Slow, Timeouts.
- `neutral` for a fixed label such as an HTTP method.
- One or two words. Counts are written in text ("4 errors"), not put in badges.

## API

| Prop | Type | Default | Description |
| - | - | - | - |
| `tone?` | `"neutral" \| "accent" \| "warning" \| "danger"` | `"neutral"` | |
| `render?` | `ReactElement \| function` | - | Renders another element. |

Parts: `Root`. Other props go to the native `span`.