Density

Badge

Badge renders short status text with Density’s shared badge presentation.

Draft
import { Badge } from "density-base-ui";

export default function BadgeExample() {
  return <Badge>Draft</Badge>;
}

Props

Prop Attribute Values Default
emphasis data-dn-emphasis primary, secondary, outline, ghost secondary
size data-dn-size 2xs, xs, sm, md, lg, xl, 2xl, 3xl sm
children None ReactNode None
Other native span props Mixed HTMLAttributes<HTMLSpanElement> None
Fixed presentation data-dn-presentation badge badge

Emphasis

PrimarySecondaryOutlineGhost
import { Badge } from "density-base-ui";
import { ExampleRow } from "../ExampleLayout";

export default function BadgeEmphasisExample() {
  return (
    <ExampleRow>
      <Badge emphasis="primary">Primary</Badge>
      <Badge emphasis="secondary">Secondary</Badge>
      <Badge emphasis="outline">Outline</Badge>
      <Badge emphasis="ghost">Ghost</Badge>
    </ExampleRow>
  );
}

Size

2xsxssmmdlgxl2xl3xl
import { Badge } from "density-base-ui";
import { ExampleRow } from "../ExampleLayout";

export default function BadgeSizeExample() {
  return (
    <ExampleRow>
      <Badge size="2xs">2xs</Badge>
      <Badge size="xs">xs</Badge>
      <Badge size="sm">sm</Badge>
      <Badge size="md">md</Badge>
      <Badge size="lg">lg</Badge>
      <Badge size="xl">xl</Badge>
      <Badge size="2xl">2xl</Badge>
      <Badge size="3xl">3xl</Badge>
    </ExampleRow>
  );
}