ant-design/components/typography/index.en-US.md

category	type	title	cols	cover
Components	General	Typography	1	https://gw.alipayobjects.com/zos/alicdn/GOM1KQ24O/Typography.svg

Basic text writing, including headings, body text, lists, and more.

When To Use

• When need to display a title or paragraph contents in Articles/Blogs/Notes.
• When you need copyable/editable/ellipsis texts.

API

Typography.Text

Property	Description	Type	Default	Version
code	Code style	boolean	false
copyable	Whether to be copyable, customize it via setting an object	boolean | copyable	false	copyable
delete	Deleted line style	boolean	false
disabled	Disabled content	boolean	false
editable	If editable. Can control edit state when is object	boolean | editable	false	editable
ellipsis	Display ellipsis when text overflows, can configure rows and expandable by using object	boolean | ellipsis	false	ellipsis
mark	Marked style	boolean	false
keyboard	Keyboard style	boolean	false	4.3.0
underline	Underlined style	boolean	false
onChange	Trigger when user edits the content	function(string)	-
strong	Bold style	boolean	false
type	Content type	secondary | success | warning | danger	-	success: 4.6.0

Typography.Title

Property	Description	Type	Default	Version
code	Code style	boolean	false
copyable	Whether to be copyable, customize it via setting an object	boolean | copyable	false	copyable
delete	Deleted line style	boolean	false
disabled	Disabled content	boolean	false
editable	If editable. Can control edit state when is object	boolean | editable	false	editable
ellipsis	Display ellipsis when text overflows, can configure rows and expandable by using object	boolean | ellipsis	false	ellipsis
level	Set content importance. Match with h1, h2, h3, h4, h5	number: 1, 2, 3, 4, 5	1	5: 4.6.0
mark	Marked style	boolean	false
underline	Underlined style	boolean	false
onChange	Trigger when user edits the content	function(string)	-
type	Content type	secondary | success | warning | danger	-	success: 4.6.0

Typography.Paragraph

Property	Description	Type	Default	Version
code	Code style	boolean	false
copyable	Whether to be copyable, customize it via setting an object	boolean | copyable	false	copyable
delete	Deleted line style	boolean	false
disabled	Disabled content	boolean	false
editable	If editable. Can control edit state when is object	boolean | editable	false	editable
ellipsis	Display ellipsis when text overflows, can configure rows and expandable by using object	boolean | ellipsis	false	ellipsis
mark	Marked style	boolean	false
underline	Underlined style	boolean	false
onChange	Trigger when user edits the content	function(string)	-
strong	Bold style	boolean	false
type	Content type	secondary | success | warning | danger	-	success: 4.6.0

copyable

{
  text: string,
  onCopy: function,
  icon: ReactNode,
  tooltips: false | [ReactNode, ReactNode],
}

Property	Description	Type	Default	Version
text	The text to copy	string	-
onCopy	Called when copied text	function	-
icon	Custom copy icon: [copyIcon, copiedIcon]	[ReactNode, ReactNode]	-	4.6.0
tooltips	Custom tooltip text, hide when it is false	[ReactNode, ReactNode]	[Copy, Copied]	4.4.0

editable

{
  icon: ReactNode,
  tooltip: boolean | ReactNode,
  editing: boolean,
  maxLength: number,
  autoSize: boolean | { minRows: number, maxRows: number },
  onStart: function,
  onChange: function(string),
}

Property	Description	Type	Default	Version
icon	Custom editable icon	ReactNode	<EditOutlined />	4.6.0
tooltip	Custom tooltip text, hide when it is false	boolean | ReactNode	Edit	4.6.0
editing	Whether to be editable	boolean	false
maxLength	maxLength attribute of textarea	number	-	4.4.0
autoSize	autoSize attribute of textarea	boolean | { minRows: number, maxRows: number }	-	4.4.0
onStart	Called when enter editable state	function	-
onChange	Called when input at textarea	function(event)	-

ellipsis

{
  rows: number,
  expandable: boolean,
  suffix: string,
  symbol: ReactNode,
  onExpand: function(event),
  onEllipsis: function(ellipsis),
}

Property	Description	Type	Default	Version
rows	Max rows of content	number	-
expandable	Whether to be expandable	boolean	-
suffix	Suffix of ellipsis content	ReactNode	-
symbol	Custom ... symbol of ellipsis	ReactNode	...
onExpand	Called when expand content	function(event)	-
onEllipsis	Called when enter or leave ellipsis state	function(ellipsis)	-	4.2.0

FAQ

How to use Typography.Link in react-router?

react-router support customize render component:

<Link to="/" component={Typography.Link} />