Data Displayduskmoonimplemented9 demos

Tag

Tag labels records with compact metadata or removable filters.

Import@duskmoon-dev/components/tag

6API sections

9documented props

6behavior scenarios

Key API

coloriconclosableonClosecloseIconbordered

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

StylesheetImport @duskmoon-dev/components/styles.css once in the app or docs shell.

StateStart with default props for static examples, then switch to controlled props when state must be shared.

ThemeThe 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

Tag is most often configured through `color`, `icon`, `closable`, `onClose`.

Covered behavior

Renders with default chip classes

Feature Demos

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

Preview

primarysecondarytertiaryaccentneutralbaseinfosuccesswarningerror

Colors

authored

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

Source

import "@duskmoon-dev/components/styles.css";
import { Tag } from "@duskmoon-dev/components/tag";

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

export function TagColorsDemo() {
  return (<div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
  {colors.map((color) => (
    <Tag key={color} color={color}>
      {color}
    </Tag>
  ))}
</div>);
}

Preview

DuskMoon Tag

Basic usage

authored

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

Source

import "@duskmoon-dev/components/styles.css";
import { Tag } from "@duskmoon-dev/components/tag";

export function Example() {
  return (<Tag
  color="primary"
>
  DuskMoon Tag
</Tag>);
}

Preview

DuskMoon Tag

Renders with default chip classes

test-backed

Tag scenario from the component test coverage: renders with default chip classes.

Source

import "@duskmoon-dev/components/styles.css";
import { Tag } from "@duskmoon-dev/components/tag";

export function TagRendersWithDefaultChipDemo() {
  return (<Tag
  // Renders with default chip classes
  color="primary"
>
  DuskMoon Tag
</Tag>);
}

Preview

primarysecondarytertiaryaccentneutralbaseinfosuccesswarningerror

Applies color class

test-backed

Tag scenario from the component test coverage: applies color class.

Source

import "@duskmoon-dev/components/styles.css";
import { Tag } from "@duskmoon-dev/components/tag";

export function TagAppliesColorClassDemo() {
  return (<Tag
  // Applies color class
  color="primary"
>
  DuskMoon Tag
</Tag>);
}

Preview

DuskMoon Tag

Applies custom className

test-backed

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

Source

import "@duskmoon-dev/components/styles.css";
import { Tag } from "@duskmoon-dev/components/tag";

export function TagAppliesCustomClassNameDemo() {
  return (<Tag
  // Applies custom className
  color="primary"
>
  DuskMoon Tag
</Tag>);
}

Preview

DuskMoon Tag

Renders icon with chip icon class

test-backed

Tag scenario from the component test coverage: renders icon with chip icon class.

Source

import "@duskmoon-dev/components/styles.css";
import { Tag } from "@duskmoon-dev/components/tag";

export function TagRendersIconWithChipDemo() {
  return (<Tag
  // Renders icon with chip icon class
  color="primary"
>
  DuskMoon Tag
</Tag>);
}

Preview

DuskMoon Tag

Renders close control and calls onClose

test-backed

Tag scenario from the component test coverage: renders close control and calls onclose.

Source

import "@duskmoon-dev/components/styles.css";
import { Tag } from "@duskmoon-dev/components/tag";

export function TagRendersCloseControlAndDemo() {
  return (<Tag
  // Renders close control and calls onClose
  color="primary"
>
  DuskMoon Tag
</Tag>);
}

Preview

DuskMoon Tag

Tag.CheckableTag reflects checked state and reports next value

test-backed

Tag scenario from the component test coverage: tag.checkabletag reflects checked state and reports next value.

Source

import "@duskmoon-dev/components/styles.css";
import { Tag } from "@duskmoon-dev/components/tag";

export function TagTagCheckableTagReflectsCheckedDemo() {
  return (<Tag
  // Tag.CheckableTag reflects checked state and reports next value
  color="primary"
>
  DuskMoon Tag
</Tag>);
}

Preview

Sunshine Theme

DuskMoon Tag

Moonlight Theme

DuskMoon Tag

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">
  <Tag
  color="primary"
>
  DuskMoon Tag
</Tag>
</div>

<div data-theme="moonlight">
  <Tag
  color="primary"
>
  DuskMoon Tag
</Tag>
</div>

API

The API reference below lists every parsed exported type or interface for Tag. Start with `color`, `icon`, `closable`, `onClose` for common usage.

Types: packages/components/src/components/tag/Tag.types.tsScenarios: packages/components/src/components/tag/Tag.test.tsx

TagPropsinterface extends Omit<ComponentProps<"span">, "color">

Prop	Type	Required	Description
`color`	`TagType`	No	color configures Tag.
`icon`	`ReactNode`	No	icon configures Tag.
`closable`	`boolean`	No	closable configures Tag.
`onClose`	`(event: MouseEvent<HTMLButtonElement>) => void`	No	onClose configures Tag.
`closeIcon`	`ReactNode`	No	closeIcon configures Tag.
`bordered`	`boolean`	No	bordered configures Tag.

CheckableTagPropsinterface extends Omit< ComponentProps<"span">, "color" | "onChange" >

Prop	Type	Required	Description
`checked`	`boolean`	No	checked configures Tag.
`onChange`	`(checked: boolean) => void`	No	onChange configures Tag.
`disabled`	`boolean`	No	disabled configures Tag.

TagColortype

| "primary" | "secondary" | "tertiary" | "accent" | "neutral" | "base" | "info" | "success" | "warning" | "error"

TagTypetype

TagColor | (string & {})

CheckableTagComponenttype

ForwardRefExoticComponent< CheckableTagProps & RefAttributes<HTMLSpanElement> >

TagComponenttype

ForwardRefExoticComponent< TagProps & RefAttributes<HTMLSpanElement> > & { CheckableTag: CheckableTagComponent