2019-02-19 11:42:05 +08:00
---
category: Components
type: General
title: Typography
cols: 1
2020-05-31 11:48:34 +08:00
cover: https://gw.alipayobjects.com/zos/alicdn/GOM1KQ24O/Typography.svg
2019-02-19 11:42:05 +08:00
---
2019-03-19 11:40:36 +08:00
Basic text writing, including headings, body text, lists, and more.
2019-02-19 11:42:05 +08:00
## When To Use
2019-10-25 09:56:30 +08:00
- When need to display a title or paragraph contents in Articles/Blogs/Notes.
2019-03-19 11:40:36 +08:00
- When you need copyable/editable/ellipsis texts.
2019-02-19 11:42:05 +08:00
## API
### Typography.Text
2019-07-11 14:14:33 +08:00
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
2019-11-22 10:33:34 +08:00
| code | Code style | boolean | false | |
2020-06-30 11:25:55 +08:00
| copyable | Whether to be copyable, customize it via setting an object | boolean \| { text: string, onCopy: function, icon: ReactNode, tooltips: \[ReactNode, ReactNode\] } | false | icon and tooltips: 4.4.0 |
2019-11-22 10:33:34 +08:00
| delete | Deleted line style | boolean | false | |
| disabled | Disabled content | boolean | false | |
2020-07-28 17:48:37 +08:00
| editable | If editable. Can control edit state when is object | boolean \| { editing: boolean, maxLength: number, autoSize: true \| false \| { minRows: number, maxRows: number }, onStart: function, onChange: function(string) } | false | maxLength and autoSize: 4.6.0 |
2020-05-30 22:33:24 +08:00
| ellipsis | Display ellipsis when text overflows. Should set width when ellipsis needed | boolean | false | |
2019-11-22 10:33:34 +08:00
| mark | Marked style | boolean | false | |
2020-05-16 14:43:29 +08:00
| keyboard | Keyboard style | boolean | false | 4.3.0 |
2019-11-22 10:33:34 +08:00
| underline | Underlined style | boolean | false | |
2020-06-30 11:25:55 +08:00
| onChange | Trigger when user edits the content | function(string) | - | |
2019-11-22 10:33:34 +08:00
| strong | Bold style | boolean | false | |
2020-01-17 17:23:48 +08:00
| type | Content type | `secondary` \| `warning` \| `danger` | - | |
2019-02-19 11:42:05 +08:00
### Typography.Title
2019-07-11 14:14:33 +08:00
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
2019-11-22 10:33:34 +08:00
| code | Code style | boolean | false | |
2020-06-30 11:25:55 +08:00
| copyable | Whether to be copyable, customize it via setting an object | boolean \| { text: string, onCopy: function, icon: ReactNode, tooltips: \[ReactNode, ReactNode\] } | false | icon and tooltips: 4.4.0 |
2019-11-22 10:33:34 +08:00
| delete | Deleted line style | boolean | false | |
| disabled | Disabled content | boolean | false | |
2020-07-28 17:48:37 +08:00
| editable | If editable. Can control edit state when is object | boolean \| { editing: boolean, maxLength: number, autoSize: true \| false \| { minRows: number, maxRows: number }, onStart: function, onChange: function(string) } | false | maxLength and autoSize: 4.6.0 |
2020-06-30 11:25:55 +08:00
| ellipsis | Display ellipsis when text overflows. Can configure rows and expandable by using object | boolean \| { rows: number, expandable: boolean, onExpand: function(event), onEllipsis: function(ellipsis) } | false | onEllipsis: 4.2.0 |
2020-07-28 20:39:43 +08:00
| level | Set content importance. Match with `h1` , `h2` , `h3` , `h4` , `h5` | number: 1, 2, 3, 4, 5 | 1 | 5: 4.6.0 |
2019-11-22 10:33:34 +08:00
| mark | Marked style | boolean | false | |
| underline | Underlined style | boolean | false | |
2020-06-30 11:25:55 +08:00
| onChange | Trigger when user edits the content | function(string) | - | |
2020-01-17 17:23:48 +08:00
| type | Content type | `secondary` \| `warning` \| `danger` | - | |
2019-02-19 11:42:05 +08:00
### Typography.Paragraph
2019-07-11 14:14:33 +08:00
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
2019-11-22 10:33:34 +08:00
| code | Code style | boolean | false | |
2020-06-30 11:25:55 +08:00
| copyable | Whether to be copyable, customize it via setting an object | boolean \| { text: string, onCopy: function, icon: ReactNode, tooltips: \[ReactNode, ReactNode\] } | false | icon and tooltips: 4.4.0 |
2019-11-22 10:33:34 +08:00
| delete | Deleted line style | boolean | false | |
| disabled | Disabled content | boolean | false | |
2020-07-28 17:48:37 +08:00
| editable | If editable. Can control edit state when is object | boolean \| { editing: boolean, maxLength: number, autoSize: true \| false \| { minRows: number, maxRows: number }, onStart: function, onChange: function(string) } | false | maxLength and autoSize: 4.6.0 |
2020-06-30 11:25:55 +08:00
| ellipsis | Display ellipsis when text overflows. Can configure rows expandable and suffix by using object | boolean \| { rows: number, expandable: boolean, suffix: string, symbol: React.ReactNode, onExpand: function(event), onEllipsis: function(ellipsis) } | false | onEllipsis: 4.2.0 |
2019-11-22 10:33:34 +08:00
| mark | Marked style | boolean | false | |
| underline | Underlined style | boolean | false | |
2020-06-30 11:25:55 +08:00
| onChange | Trigger when user edits the content | function(string) | - | |
2019-11-22 10:33:34 +08:00
| strong | Bold style | boolean | false | |
2020-01-17 17:23:48 +08:00
| type | Content type | `secondary` \| `warning` \| `danger` | - | |
2020-05-11 14:28:57 +08:00
## FAQ
### How to use Typography.Link in react-router?
`react-router` support [customize ](https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/Link.md#component-reactcomponent ) render component:
```tsx
< Link to = "/" component = {Typography.Link} / >
```
