--- localeCode: en-US order: 16 category: Basic title: Typography subTitle: Typography icon: doc-typography brief: The basic format of text, images, and paragraphs. --- ## When to Use - To display the text content of articles, blogs, logs, etc. - To take basic operations such as copying and omitting text. ## Demos ### How to import ```jsx import import { Typography } from '@douyinfe/semi-ui'; ``` ### Title Use `heading` to set different levels of headint title. ```jsx live=true import React from 'react'; import { Typography } from '@douyinfe/semi-ui'; function Demo() { const { Title } = Typography; return (
h1. Semi Design h2. Semi Design h3. Semi Design h4. Semi Design h5. Semi Design h6. Semi Design
); } ``` ### Text Text component has different built-in styles. You could also pass `icon` to use the build-in styles for icon. Different from passing icon to children, using `icon` for link will have no underline in compliance with Semi Design principles. ```jsx live=true import React from 'react'; import { Typography } from '@douyinfe/semi-ui'; function Demo() { const { Text } = Typography; return (
Text

Secondary

{'Tertiary v>=1.2.0'}

{'Quaternary v>=1.2.0'}

Warning

{'Success v>=1.7.0'}

Danger

Disabled

Default Mark

Example Code

Underline

Deleted

Strong
); } ``` You could pass object to `link`, which will be mounted on ``. ```jsx live=true import React from 'react'; import { Typography } from '@douyinfe/semi-ui'; import { IconLink } from '@douyinfe/semi-icons'; function Demo() { const { Text } = Typography; return (
Link

Open Website

} underline>Link
); } ``` ### Paragraph Paragraph component has two spacings. You could set`spacing='extended'` for a looser spacing. ```jsx live=true import React from 'react'; import { Typography } from '@douyinfe/semi-ui'; function Demo() { const { Paragraph, Title } = Typography; return (
Default Spacing {`Life's but a walking shadow, a poor player, that struts and frets his hour upon the stage, and then is heard no more; it is a tale told by an idiot, full of sound and fury, signifying nothing.`}
Extended Spacing {`Life's but a walking shadow, a poor player, that struts and frets his hour upon the stage, and then is heard no more; it is a tale told by an idiot, full of sound and fury, signifying nothing.`}
); } ``` ### Size Paragraph and Text component support two sizes, `small`(12px) and `normal`(14px). By default it is set to `normal`。 ```jsx live=true import React from 'react'; import { Typography } from '@douyinfe/semi-ui'; function Demo() { const { Paragraph, Text } = Typography; return (
Normal {`Life's but a walking shadow, a poor player, that struts and frets his hour upon the stage, and then is heard no more; it is a tale told by an idiot, full of sound and fury, signifying nothing.`}
Small {`Life's but a walking shadow, a poor player, that struts and frets his hour upon the stage, and then is heard no more; it is a tale told by an idiot, full of sound and fury, signifying nothing.`}
); } ``` ### Interactive Copyable text. ```jsx live=true import React from 'react'; import { Typography, TextArea } from '@douyinfe/semi-ui'; function Demo() { const { Paragraph, Text } = Typography; return (
Click the right icon to copy text. Click to copy text. Toast.success({ content: 'Successfully copied.'}) }}>Click the right icon to copy.
Paste here: