Typography

Typography components for text, titles, and paragraphs.

Text

Text types

Default textSecondary textSuccess textWarning textDanger textDisabled text

Example

Ellipsis

Text ellipsis

This is a long piece of text that will be truncated with an ellipsis once it exceeds the container width, without wrapping.

Example

Copyable

Copyable text

Copyable text content

Example

Title

Heading levels

Heading 1Heading 2Heading 3

Example

Paragraph

Paragraphs

Paragraph text 1Paragraph text 2

Example

API

Component	Tag	Props
Text	oas-text	type, ellipsis, copyable
Title	oas-title	level (1-5), type, ellipsis
Paragraph	oas-paragraph	type, ellipsis

type values: default / secondary / success / warning / danger / disabled.

oas-text

Attribute	Description	Type	Default
copyable	Show a copy button that copies the text content on click	boolean	—
ellipsis	Single-line ellipsis when the text overflows its container	boolean	—
level	Heading level (1-5)	string	3
type	Text type: default / secondary / success / warning / danger / disabled	TextType	default

Event	Description
oas-copy	Copy succeeded, detail: { text }
oas-copy-error	Copy failed, detail: { text }

Name	Description
default	—

oas-title

Attribute	Description	Type	Default
copyable	Show a copy button that copies the text content on click	boolean	—
ellipsis	Single-line ellipsis when the text overflows its container	boolean	—
level	Heading level (1-5)	string	3
type	Text type: default / secondary / success / warning / danger / disabled	TextType	default

Event	Description
oas-copy	Copy succeeded, detail: { text }
oas-copy-error	Copy failed, detail: { text }

Name	Description
default	—

oas-paragraph

Attribute	Description	Type	Default
copyable	Show a copy button that copies the text content on click	boolean	—
ellipsis	Single-line ellipsis when the text overflows its container	boolean	—
level	Heading level (1-5)	string	3
type	Text type: default / secondary / success / warning / danger / disabled	TextType	default

Event	Description
oas-copy	Copy succeeded, detail: { text }
oas-copy-error	Copy failed, detail: { text }

Name	Description
default	—