Density

Badge

Badge renders short status text with its component-local badge styling.

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

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

Color

Set color to destructive, warning, or success for semantic status labels. Combine it with any emphasis value to choose the treatment; the grid shows every combination.

primarysecondaryoutlineghost-primaryghost-secondaryghost-tertiary
destructiveStatusStatusStatusStatusStatusStatus
warningStatusStatusStatusStatusStatusStatus
successStatusStatusStatusStatusStatusStatus
import { Badge, View } from "density-base-ui";

const colors = ["destructive", "warning", "success"] as const;
const emphases = [
  "primary",
  "secondary",
  "outline",
  "ghost-primary",
  "ghost-secondary",
  "ghost-tertiary",
] as const;

export default function BadgeColorExample() {
  return (
    <View align="stretch" gap="md">
      <View
        align="center"
        gap="md"
        layout="grid"
        style={{ gridTemplateColumns: "7rem repeat(6, minmax(0, 1fr))" }}
      >
        <span />
        {emphases.map((emphasis) => (
          <span key={emphasis} data-dn-size="xs">
            {emphasis}
          </span>
        ))}
      </View>
      {colors.map((color) => (
        <View
          key={color}
          align="center"
          gap="md"
          layout="grid"
          style={{
            gridTemplateColumns: "7rem repeat(6, minmax(0, 1fr))",
            justifyItems: "start",
          }}
        >
          <span data-dn-size="xs">{color}</span>
          {emphases.map((emphasis) => (
            <Badge color={color} emphasis={emphasis} key={emphasis}>
              Status
            </Badge>
          ))}
        </View>
      ))}
    </View>
  );
}

Icons and dots

Use icons and decorative dots alongside a badge’s text label.

CompleteLive
import { Badge, Indicator, View } from "density-base-ui";
import { Check } from "lucide-react";

export default function BadgeContentExample() {
  return (
    <View align="center" orientation="horizontal" padding={false} wrap>
      <Badge>
        <Check aria-hidden="true" size={14} strokeWidth={1.75} />
        Complete
      </Badge>
      <Badge emphasis="outline">
        <Indicator />
        Live
      </Badge>
    </View>
  );
}

Hover visibility

Inside a reveal host such as ListItem, set hoverVisibility="hover" to show a badge while its host is hovered or contains keyboard focus. Use not-hover for the inverse; always is the default.

Release notesNew
import { Badge, ListItem, View } from "density-base-ui";

export default function BadgeHoverVisibilityExample() {
  return (
    <View align="start" gap="md" padding={false}>
      <ListItem
        as="div"
        title="Release notes"
        childrenEnd={<Badge hoverVisibility="hover">New</Badge>}
      />
    </View>
  );
}

Dismiss control

Set dismissable to show a Close control. Handle onDismiss to remove the badge from its owner.

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

export default function BadgeDismissableExample() {
  return (
    <Badge dismissable onDismiss={() => undefined}>
      Draft
    </Badge>
  );
}

Emphasis

PrimarySecondaryOutlineGhost primaryGhost secondaryGhost tertiary
import { Badge, View } from "density-base-ui";

export default function BadgeEmphasisExample() {
  return (
    <View align="center" gap="md" orientation="horizontal" padding={false} wrap>
      <Badge emphasis="primary">Primary</Badge>
      <Badge emphasis="secondary">Secondary</Badge>
      <Badge emphasis="outline">Outline</Badge>
      <Badge emphasis="ghost-primary">Ghost primary</Badge>
      <Badge emphasis="ghost-secondary">Ghost secondary</Badge>
      <Badge emphasis="ghost-tertiary">Ghost tertiary</Badge>
    </View>
  );
}

Size

2xsxssmmdlgxl2xl3xl
import { Badge, View } from "density-base-ui";

export default function BadgeSizeExample() {
  return (
    <View align="center" gap="md" orientation="horizontal" padding={false} wrap>
      <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>
    </View>
  );
}