Ant Design

⌘ K

5.9.2

Divider

A divider line separates different content.

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
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`

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

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

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

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

Use type="vertical" make it vertical.