Typography

Typography component for consistent text styling. Automatically selects the appropriate HTML tag based on the variant.

Import

import { Typography } from 'vuiii'

Basic Usage

Display Text

Heading 1

Heading 2

Body text paragraph

Small caption text

View in Storybook

<Typography variant="display">Display Text</Typography>
<Typography variant="heading1">Heading 1</Typography>
<Typography variant="heading2">Heading 2</Typography>
<Typography variant="body1">Body text paragraph</Typography>
<Typography variant="caption">Small caption text</Typography>

Props

Prop	Type	Default	Description
variant	'display' | 'heading1'…'heading6' | 'body1' | 'body2' | 'label' | 'caption'	'body1'	Text style to apply
tag	'h1'…'h6' | 'p' | 'span' | 'div' | 'caption'	-	Overrides the tag the variant picks

Slots

Slot	Description
default	Text content

Automatic Tag Selection

Each variant renders the semantically matching element, so the document outline follows the visual hierarchy without you repeating yourself.

Variant	Tag
display, heading1	h1
heading2…heading6	h2…h6
body1, body2	p
label, caption	span

<Typography variant="heading1">Renders as h1</Typography>
<Typography variant="body1">Renders as p</Typography>
<Typography variant="label">Renders as span</Typography>

Overriding the Tag

Use tag when the visual weight and the document structure need to disagree — a section heading that should look like a heading1 but must stay an h2 for the outline.

Styled as heading1, renders as h2

<Typography variant="heading1" tag="h2">Styled as heading1, renders as h2</Typography>

All Variants

display

heading1

heading2

heading3

heading4

heading5

heading6

body1

body2

labelcaption

Design tokens

The sizes, weights and line heights come from CSS variables — see Typography tokens to restyle them globally.

Storybook

For interactive examples with all variants, see Typography in Storybook.