---
title: Tag
description: A static value on a control fill, optionally with its key.
---

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

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

export default function TagBasic() {
  return (
    <Preview>
      <Tag.Root>Value</Tag.Root>
      <Tag.Root label="Label">Value</Tag.Root>
    </Preview>
  );
}
```

- Use tags for attributes of one event or release: release, environment, browser.
- A tag shows a value and does nothing on click. Use a [Chip](/deft/components/chip) for a toggle and a [Badge](/deft/components/badge) for a status that needs attention.
- The key is muted, the value is default text. An icon before the value is small and takes the icon color.
- The tag is compact and never wraps: a long value is clipped at the edge of its container, so keep values short.

## API

| Prop | Type | Default | Description |
| - | - | - | - |
| `label?` | `ReactNode` | - | The key, shown muted before the value. |

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