Typography

Used to display titles, paragraphs, text, links, and other typographic content.

Heading Levels

Use the level prop to define the heading level, supporting h1 to h6.

Heading Levels

Text Types

Use the type prop to define the semantic color of the text.

Text Types

Text Decorations

Control text styles through props such as bold, italic, underline, delete, mark, code, and keyboard.

Text Decorations

Text Sizes

Use the size prop to set the font size for YhTypographyText.

Text Sizes

Paragraph

YhTypographyParagraph supports semantic color and alignment options.

Paragraph

Link

YhTypographyLink supports href, target, type, underline, and disabled.

Link

Ellipsis

Titles and paragraphs support the ellipsis prop. Use a boolean for titles and a line count for paragraphs.

Ellipsis

Use in Nuxt

Typography components work in Nuxt 3/4 after registering @yh-ui/nuxt. The example below shows a simple client-side loading-state switch.

Use in Nuxt

SSR Notes:

• Semantic tags such as headings, paragraphs, spans, and links render consistently during SSR.
• Decoration, color, and ellipsis styles remain stable after hydration.
• Slot content is rendered without client/server mismatch.

API

Props

Typography Title

Prop	Description	Type	Default
level	Heading level	1 | 2 | 3 | 4 | 5 | 6	1
type	Text type	'primary' | 'success' | 'warning' | 'danger' | 'info' | 'secondary'	undefined
bold	Bold	boolean	true
delete	Strikethrough	boolean	false
underline	Underline	boolean	false
italic	Italic	boolean	false
mark	Highlight mark	boolean	false
code	Code style	boolean	false
ellipsis	Ellipsis	boolean	false
tag	Custom tag name	string	undefined
theme-overrides	Component-level theme variable overrides	ComponentThemeVars	undefined

Typography Text

Prop	Description	Type	Default
type	Text type	'primary' | 'success' | 'warning' | 'danger' | 'info' | 'secondary'	undefined
size	Font size	'small' | 'default' | 'large'	undefined
bold	Bold	boolean	false
delete	Strikethrough	boolean	false
underline	Underline	boolean	false
italic	Italic	boolean	false
mark	Mark	boolean	false
code	Code style	boolean	false
keyboard	Keyboard style	boolean	false
ellipsis	Ellipsis	boolean	false
tag	Custom tag name	string	'span'
theme-overrides	Component-level theme variable overrides	ComponentThemeVars	undefined

Typography Paragraph

Prop	Description	Type	Default
type	Text type	'primary' | 'success' | 'warning' | 'danger' | 'info' | 'secondary'	undefined
bold	Bold	boolean	false
delete	Strikethrough	boolean	false
italic	Italic	boolean	false
mark	Mark	boolean	false
align	Alignment	'left' | 'center' | 'right' | 'justify'	undefined
ellipsis	Ellipsis	boolean | number	false
spacing	Paragraph spacing	'compact' | 'default' | 'loose'	'default'
theme-overrides	Component-level theme variable overrides	ComponentThemeVars	undefined

Typography Link

Prop	Description	Type	Default
href	Link URL	string	undefined
target	Target	'_blank' | '_self' | '_parent' | '_top'	'_self'
type	Link type	'primary' | 'success' | 'warning' | 'danger' | 'info' | 'secondary'	undefined
underline	Underline	boolean	false
disabled	Disabled	boolean	false
theme-overrides	Component-level theme variable overrides	ComponentThemeVars	undefined

Events

Name	Description	Parameters
click	Emitted by Typography.Link when the link is clicked while not disabled	(event: MouseEvent)

Slots

All typography sub-components support the default slot.

Expose

This component does not expose public instance methods or properties.

Theme Variables

Variable Name	Description	Default
--yh-typography-title-color	Title color	var(--yh-text-color-primary, #303133)
--yh-typography-title-weight	Title font weight	600
--yh-typography-h1-size	h1 size	32px
--yh-typography-h2-size	h2 size	28px
--yh-typography-h3-size	h3 size	24px
--yh-typography-h4-size	h4 size	20px
--yh-typography-h5-size	h5 size	16px
--yh-typography-h6-size	h6 size	14px
--yh-typography-text-color	Text color	var(--yh-text-color-regular, #606266)
--yh-typography-text-size	Text size	14px
--yh-typography-line-height	Line height	1.5
--yh-typography-paragraph-line-height	Paragraph line height	1.8
--yh-typography-link-color	Link color	var(--yh-color-primary, #409eff)
--yh-typography-link-hover-color	Link hover color	var(--yh-color-primary-light-3, #79bbff)
--yh-typography-mark-bg	Mark background color	#ffe58f

Code and keyboard styles additionally consume the global monospace token --yh-font-family-monospace.

Type Exports

Name	Description
YhTypographyTitleProps	Typography.Title props type
YhTypographyTextProps	Typography.Text props type
YhTypographyParagraphProps	Typography.Paragraph props type
YhTypographyLinkProps	Typography.Link props type
YhTypographySlots	Shared typography slots type
YhTypographyTitleLevel	Title level union
YhTypographyType	Typography type union
YhTypographyTitleInstance	Typography.Title instance type
YhTypographyTextInstance	Typography.Text instance type
YhTypographyParagraphInstance	Typography.Paragraph instance type
YhTypographyLinkInstance	Typography.Link instance type