Ant Design

⌘ K

5.25.0

Divider

A divider line separates different content.

Importimport { Divider } from "antd";

Docs

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	`start` \| `end` \| `center`	`center`	`start` `end`: 5.24.0
orientationMargin	The margin-left/right between the title and its closest border, while the `orientation` should not be `center`, 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	-
size	The size of divider. Only valid for horizontal layout	`small` \| `middle` \| `large`	-	5.25.0
type	The direction type of divider	`horizontal` \| `vertical`	`horizontal`

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?

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

The size of the spacing.

5.25.0

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

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

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

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