Badge

A short label on a tinted fill. Marks what is new or what needs attention.

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

PropType

tone?"neutral" | "accent" | "warning" | "danger"

Type"neutral" | "accent" | "warning" | "danger"

Default"neutral"

render?ReactElement | function

Renders another element.

TypeReactElement | function

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