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 h1
Heading h2
Heading h3
Heading h4
Heading h5
Heading h6
Text Types
Use the type prop to define the semantic color of the text.
Text Decorations
Control text styles through props such as bold, italic, underline, delete, mark, code, and keyboard.
Code StyleKeyboard StyleText Sizes
Use the size prop to set the font size for YhTypographyText.
Paragraph
YhTypographyParagraph supports semantic color and alignment options.
YH-UI is a modern UI component library for Vue 3, providing rich components and utilities. With Composition API and strong TypeScript support, it offers an ultimate development experience.
This paragraph uses the secondary color type, suitable for auxiliary descriptions.
Link
YhTypographyLink supports href, target, type, underline, and disabled.
Ellipsis
Titles and paragraphs support the ellipsis prop. Use a boolean for titles and a line count for paragraphs.
This is a very long title. It will be truncated with an ellipsis when the container width is insufficient.
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.
Welcome to YH-UI
A modern Vue 3 component library with full Nuxt SSR support.
YH-UI provides rich components to help quickly build modern web applications.
Learn MoreSSR 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 |