Tag

A static value on a control fill, optionally with its key.

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 for a toggle and a 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

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