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	boolean	false
keyboard	Keyboard style	boolean	false	4.3.0
mark	Marked style	boolean	false
strong	Bold style	boolean	false
type	Content type	secondary | success | warning | danger	-	success: 4.6.0
underline	Underlined style	boolean	false
onChange	Trigger when user edits the content	function(string)	-

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
type	Content type	secondary | success | warning | danger	-	success: 4.6.0
underline	Underlined style	boolean	false
onChange	Trigger when user edits the content	function(string)	-

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
strong	Bold style	boolean	false
type	Content type	secondary | success | warning | danger	-	success: 4.6.0
underline	Underlined style	boolean	false
onChange	Trigger when user edits the content	function(string)	-

copyable

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

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

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

ellipsis

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

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

FAQ

How to use Typography.Link in react-router?

react-router support customize render component:

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