Ant Design

⌘ K

5.23.3

Divider

A divider line separates different content.

Importimport{ Divider }from"antd";

Sourcecomponents/divider

Docs

Edit this page Changelog

Ant Design

⌘ K

5.23.3

Divider

A divider line separates different content.

Importimport{ Divider }from"antd";

Sourcecomponents/divider

Docs

Edit this page Changelog

When To Use

Divide sections of an article.
Divide inline text and links such as the operation column of table.

Examples

API

Common props ref：Common props

Property	Description	Type	Default	Version
children	The wrapped title	ReactNode	-
className	The className of container	string	-
dashed	Whether line is dashed	boolean	false
variant	Whether line is dashed, dotted or solid	`dashed` \| `dotted` \| `solid`	solid	5.20.0
orientation	The position of title inside divider	`left` \| `right` \| `center`	`center`
orientationMargin	The margin-left/right between the title and its closest border, while the `orientation` must be `left` or `right`, If a numeric value of type `string` is provided without a unit, it is assumed to be in pixels (px) by default.	string \| number	-
plain	Divider text show as plain style	boolean	true	4.2.0
style	The style object of container	CSSProperties	-
type	The direction type of divider	`horizontal` \| `vertical`	`horizontal`

Design Token

Component TokenHow to use?

Token Name	Description	Type	Default Value
orientationMargin	Distance between text and edge, which should be a number between 0 and 1.	number	0.05
textPaddingInline	Horizontal padding of text	undefined \| PaddingInline<string \| number>	1em
verticalMarginInline	Horizontal margin of vertical Divider	undefined \| MarginInline<string \| number>	8

Global TokenHow to use?

When To Use

Divide sections of an article.
Divide inline text and links such as the operation column of table.

Examples

API

Common props ref：Common props

Property	Description	Type	Default	Version
children	The wrapped title	ReactNode	-
className	The className of container	string	-
dashed	Whether line is dashed	boolean	false
variant	Whether line is dashed, dotted or solid	`dashed` \| `dotted` \| `solid`	solid	5.20.0
orientation	The position of title inside divider	`left` \| `right` \| `center`	`center`
orientationMargin	The margin-left/right between the title and its closest border, while the `orientation` must be `left` or `right`, If a numeric value of type `string` is provided without a unit, it is assumed to be in pixels (px) by default.	string \| number	-
plain	Divider text show as plain style	boolean	true	4.2.0
style	The style object of container	CSSProperties	-
type	The direction type of divider	`horizontal` \| `vertical`	`horizontal`

Design Token

Component TokenHow to use?

Token Name	Description	Type	Default Value
orientationMargin	Distance between text and edge, which should be a number between 0 and 1.	number	0.05
textPaddingInline	Horizontal padding of text	undefined \| PaddingInline<string \| number>	1em
verticalMarginInline	Horizontal margin of vertical Divider	undefined \| MarginInline<string \| number>	8

Global TokenHow to use?

Horizontal

A Divider is horizontal by default. You can add text within Divider.

Text without heading style

You can use non-heading style of divider text by setting the plain property.

Variant

Divider is of solid variant by default. You can change that to either dashed or dotted.

Divider with title

Divider with inner title, set orientation="left/right" to align it.

Vertical

Use type="vertical" to make the divider vertical.