Data Displayduskmoonimplemented8 demos

Typography

Typography standardizes text, title, paragraph, link, copy, edit, and ellipsis behavior.

Import@duskmoon-dev/components/typography

22API sections

41documented props

6behavior scenarios

Key API

editingicontooltiptriggerTypeenterIcontext

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

Typography is most often configured through `editing`, `icon`, `tooltip`, `triggerType`.

Covered behavior

Renders root and semantic text states

Feature Demos

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

Preview

DuskMoon Typography

Basic usage

authored

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

Source

import "@duskmoon-dev/components/styles.css";
import { Typography } from "@duskmoon-dev/components/typography";

export function Example() {
  return (<Typography>DuskMoon Typography</Typography>);
}

Preview

DuskMoon Typography

Renders root and semantic text states

test-backed

Typography scenario from the component test coverage: renders root and semantic text states.

Source

import "@duskmoon-dev/components/styles.css";
import { Typography } from "@duskmoon-dev/components/typography";

export function TypographyRendersRootAndSemanticDemo() {
  return (<Typography>DuskMoon Typography</Typography>);
}

Preview

DuskMoon Typography

Renders title level, paragraph, and link

test-backed

Typography scenario from the component test coverage: renders title level, paragraph, and link.

Source

import "@duskmoon-dev/components/styles.css";
import { Typography } from "@duskmoon-dev/components/typography";

export function TypographyRendersTitleLevelParagraphDemo() {
  return (<Typography>DuskMoon Typography</Typography>);
}

Preview

DuskMoon Typography

Supports copyable text

test-backed

Typography scenario from the component test coverage: supports copyable text.

Source

import "@duskmoon-dev/components/styles.css";
import { Typography } from "@duskmoon-dev/components/typography";

export function TypographySupportsCopyableTextDemo() {
  return (<Typography>DuskMoon Typography</Typography>);
}

Preview

DuskMoon Typography

Supports editable text save and cancel

test-backed

Typography scenario from the component test coverage: supports editable text save and cancel.

Source

import "@duskmoon-dev/components/styles.css";
import { Typography } from "@duskmoon-dev/components/typography";

export function TypographySupportsEditableTextSaveDemo() {
  return (<Typography>DuskMoon Typography</Typography>);
}

Preview

DuskMoon Typography

Supports expandable ellipsis

test-backed

Typography scenario from the component test coverage: supports expandable ellipsis.

Source

import "@duskmoon-dev/components/styles.css";
import { Typography } from "@duskmoon-dev/components/typography";

export function TypographySupportsExpandableEllipsisDemo() {
  return (<Typography>DuskMoon Typography</Typography>);
}

Preview

DuskMoon Typography

Prevents disabled link navigation

test-backed

Typography scenario from the component test coverage: prevents disabled link navigation.

Source

import "@duskmoon-dev/components/styles.css";
import { Typography } from "@duskmoon-dev/components/typography";

export function TypographyPreventsDisabledLinkNavigationDemo() {
  return (<Typography>DuskMoon Typography</Typography>);
}

Preview

Sunshine Theme

DuskMoon Typography

Moonlight Theme

DuskMoon Typography

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">
  <Typography>DuskMoon Typography</Typography>
</div>

<div data-theme="moonlight">
  <Typography>DuskMoon Typography</Typography>
</div>

API

The API reference below lists every parsed exported type or interface for Typography. Start with `editing`, `icon`, `tooltip`, `triggerType` for common usage.

Types: packages/components/src/components/typography/Typography.types.tsScenarios: packages/components/src/components/typography/Typography.test.tsx

TypographyEditableConfiginterface

Prop	Type	Required	Description
`editing`	`boolean`	No	editing configures Typography.
`icon`	`ReactNode`	No	icon configures Typography.
`tooltip`	`ReactNode`	No	tooltip configures Typography.
`triggerType`	`"icon" \| "text" \| Array<"icon" \| "text">`	No	triggerType configures Typography.
`enterIcon`	`ReactNode`	No	enterIcon configures Typography.
`text`	`string`	No	text configures Typography.
`maxLength`	`number`	No	maxLength configures Typography.
`autoSize`	`boolean \| { minRows?: number; maxRows?: number }`	No	autoSize configures Typography.
`onStart`	`() => void`	No	onStart configures Typography.
`onChange`	`(value: string) => void`	No	onChange configures Typography.
`onCancel`	`() => void`	No	onCancel configures Typography.
`onEnd`	`() => void`	No	onEnd configures Typography.

TypographyCopyableConfiginterface

Prop	Type	Required	Description
`text`	`string`	No	text configures Typography.
`icon`	`ReactNode \| [ReactNode, ReactNode]`	No	icon configures Typography.
`tooltips`	`false \| ReactNode \| [ReactNode, ReactNode]`	No	tooltips configures Typography.
`format`	`TypographyCopyFormat`	No	format configures Typography.
`onCopy`	`(event?: ClipboardEvent \| React.MouseEvent<HTMLElement>) => void`	No	onCopy configures Typography.

TypographyEllipsisConfiginterface

Prop	Type	Required	Description
`rows`	`number`	No	rows configures Typography.
`expandable`	`boolean \| "collapsible"`	No	expandable configures Typography.
`suffix`	`string`	No	suffix configures Typography.
`symbol`	`ReactNode \| ((expanded: boolean) => ReactNode)`	No	symbol configures Typography.
`tooltip`	`ReactNode`	No	tooltip configures Typography.
`onExpand`	`(`	No	onExpand configures Typography.
`event`	`React.MouseEvent<HTMLElement>,`	Yes	event configures Typography.
`info`	`{ expanded: boolean },`	Yes	info configures Typography.
`onEllipsis`	`(ellipsis: boolean) => void`	No	onEllipsis configures Typography.

TypographySemanticPropsinterface

Prop	Type	Required	Description
`type`	`TypographyStatus`	No	type configures Typography.
`disabled`	`boolean`	No	disabled configures Typography.
`mark`	`boolean`	No	mark configures Typography.
`code`	`boolean`	No	code configures Typography.
`keyboard`	`boolean`	No	keyboard configures Typography.
`underline`	`boolean`	No	underline configures Typography.
`delete`	`boolean`	No	delete configures Typography.
`strong`	`boolean`	No	strong configures Typography.
`italic`	`boolean`	No	italic configures Typography.

TypographyBehaviorPropsinterface

Prop	Type	Required	Description
`editable`	`TypographyEditable`	No	editable configures Typography.
`copyable`	`TypographyCopyable`	No	copyable configures Typography.
`ellipsis`	`TypographyEllipsis`	No	ellipsis configures Typography.

TextPropsinterface extends Omit<ComponentProps<"span">, "color">, TypographySemanticProps, TypographyBehaviorProps

Prop	Type	Required	Description
`size`	`TypographySize`	No	size configures Typography.

ParagraphPropsinterface extends Omit<ComponentProps<"p">, "color">, TypographySemanticProps, TypographyBehaviorProps

No direct props declared.

TitlePropsinterface extends Omit<ComponentProps<"h1">, "color">, TypographySemanticProps, TypographyBehaviorProps

Prop	Type	Required	Description
`level`	`TypographyLevel`	No	level configures Typography.

LinkPropsinterface extends Omit<ComponentProps<"a">, "color" | "type">, TypographySemanticProps

Prop	Type	Required	Description
`ellipsis`	`TypographyEllipsis`	No	ellipsis configures Typography.

TypographyStatustype

"secondary" | "success" | "warning" | "danger"

TypographySizetype

"sm" | "md" | "lg"

TypographyLeveltype

1 | 2 | 3 | 4 | 5

TypographyCopyFormattype

"text/plain" | "text/html"

TypographyEditabletype

boolean | TypographyEditableConfig

TypographyCopyabletype

boolean | TypographyCopyableConfig

TypographyEllipsistype

boolean | TypographyEllipsisConfig

TypographyPropstype

ComponentProps<"div">

TextComponenttype

ForwardRefExoticComponent< TextProps & RefAttributes<HTMLSpanElement> >

ParagraphComponenttype

ForwardRefExoticComponent< ParagraphProps & RefAttributes<HTMLParagraphElement> >

TitleComponenttype

ForwardRefExoticComponent< TitleProps & RefAttributes<HTMLHeadingElement> >

LinkComponenttype

ForwardRefExoticComponent< LinkProps & RefAttributes<HTMLAnchorElement> >

TypographyComponenttype

ForwardRefExoticComponent< TypographyProps & RefAttributes<HTMLDivElement> > & { Text: TextComponent