Dm DuskMoon React
Standard duskmoon implemented 7 demos

Badge

Badge adds short status, count, or classification markers around nearby content.

Import @duskmoon-dev/components/badge
4 API sections
3 documented props
4 behavior scenarios
Key API
colorappearancesize

Usage

When to use

  • Use it to clarify state, metadata, content hierarchy, or loading without creating a new workflow.
  • Pair it with semantic content so visual treatment never becomes the only source of meaning.

Implementation notes

Stylesheet Import @duskmoon-dev/components/styles.css once in the app or docs shell.
State Start with default props for static examples, then switch to controlled props when state must be shared.
Theme The preview inherits the active DuskMoon data-theme value from the docs layout.

Features

Visual hierarchy

Focuses on status, metadata, empty/loading states, or content grouping without owning application state.

Theme integration

Uses DuskMoon tokens so the component follows the active docs theme.

Primary API surface

Badge is most often configured through `color`, `appearance`, `size`.

Covered behavior

Renders children correctly

Feature Demos

Feature demos are authored for the component page, then supplemented with behavior scenarios from the component test coverage.

Preview
filled
primary
secondary
tertiary
accent
neutral
base
info
success
warning
error
outline
primary
secondary
tertiary
accent
neutral
base
info
success
warning
error
tonal
primary
secondary
tertiary
accent
neutral
base
info
success
warning
error
ghost
primary
secondary
tertiary
accent
neutral
base
info
success
warning
error

Colors

authored

Badge supports the full semantic color palette: primary, secondary, tertiary, accent, neutral, base, info, success, warning, error.

Source
import "@duskmoon-dev/components/styles.css";
import { Badge } from "@duskmoon-dev/components/badge";

const colors = [
  "primary",
  "secondary",
  "tertiary",
  "accent",
  "neutral",
  "base",
  "info",
  "success",
  "warning",
  "error"
] as const;

export function BadgeColorsDemo() {
  return (<div style={{ display: "grid", gap: 12 }}>
  {(["filled", "outline", "tonal", "ghost"] as const).map((appearance) => (
    <div key={appearance} style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
      {colors.map((color) => (
        <Badge key={color} color={color} appearance={appearance}>
          {color}
        </Badge>
      ))}
    </div>
  ))}
</div>);
}
Preview
DuskMoon Badge

Basic usage

authored

Import the component stylesheet and Badge from its package subpath, then render it with the core props.

Source
import "@duskmoon-dev/components/styles.css";
import { Badge } from "@duskmoon-dev/components/badge";

export function Example() {
  return (<Badge
  color="primary"
  appearance="tonal"
>
  DuskMoon Badge
</Badge>);
}
Preview
DuskMoon Badge

Renders children correctly

test-backed

Badge scenario from the component test coverage: renders children correctly.

Source
import "@duskmoon-dev/components/styles.css";
import { Badge } from "@duskmoon-dev/components/badge";

export function BadgeRendersChildrenCorrectlyDemo() {
  return (<Badge
  // Renders children correctly
  color="primary"
  appearance="tonal"
>
  DuskMoon Badge
</Badge>);
}
Preview
DuskMoon Badge

Applies default classes

test-backed

Badge scenario from the component test coverage: applies default classes.

Source
import "@duskmoon-dev/components/styles.css";
import { Badge } from "@duskmoon-dev/components/badge";

export function BadgeAppliesDefaultClassesDemo() {
  return (<Badge
  // Applies default classes
  color="primary"
  appearance="tonal"
>
  DuskMoon Badge
</Badge>);
}
Preview
filled
primary
secondary
tertiary
accent
neutral
base
info
success
warning
error
outline
primary
secondary
tertiary
accent
neutral
base
info
success
warning
error
tonal
primary
secondary
tertiary
accent
neutral
base
info
success
warning
error
ghost
primary
secondary
tertiary
accent
neutral
base
info
success
warning
error

Applies color, appearance, and size classes

test-backed

Badge scenario from the component test coverage: applies color, appearance, and size classes.

Source
import "@duskmoon-dev/components/styles.css";
import { Badge } from "@duskmoon-dev/components/badge";

export function BadgeAppliesColorAppearanceAndDemo() {
  return (<Badge
  // Applies color, appearance, and size classes
  color="primary"
  appearance="tonal"
>
  DuskMoon Badge
</Badge>);
}
Preview
DuskMoon Badge

Applies custom className

test-backed

Badge scenario from the component test coverage: applies custom classname.

Source
import "@duskmoon-dev/components/styles.css";
import { Badge } from "@duskmoon-dev/components/badge";

export function BadgeAppliesCustomClassNameDemo() {
  return (<Badge
  // Applies custom className
  color="primary"
  appearance="tonal"
>
  DuskMoon Badge
</Badge>);
}
Preview
Sunshine Theme
DuskMoon Badge
Moonlight Theme
DuskMoon Badge

Theme aware

authored

Docs previews inherit the DuskMoon data-theme value. Use the header switch to compare light and dark rendering.

Source
<div data-theme="sunshine">
  <Badge
  color="primary"
  appearance="tonal"
>
  DuskMoon Badge
</Badge>
</div>

<div data-theme="moonlight">
  <Badge
  color="primary"
  appearance="tonal"
>
  DuskMoon Badge
</Badge>
</div>

API

The API reference below lists every parsed exported type or interface for Badge. Start with `color`, `appearance`, `size` for common usage.

Types: packages/components/src/components/badge/Badge.types.ts Scenarios: packages/components/src/components/badge/Badge.test.tsx
BadgeProps interface extends ComponentProps<"div">
Prop Type Required Description
color BadgeColor No color configures Badge.
appearance BadgeAppearance No appearance configures Badge.
size BadgeSize No size configures Badge.
BadgeColor type 
| "primary" | "secondary" | "tertiary" | "accent" | "neutral" | "base" | "info" | "success" | "warning" | "error"
BadgeAppearance type 
"filled" | "outline" | "tonal" | "ghost"
BadgeSize type 
"sm" | "md" | "lg"