Divider - Ant Design

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	-
classNames	Customize class for each semantic structure inside the component. Supports object or function.	Record<SemanticDOM, string> \| (info: { props })=> Record<SemanticDOM, string>	-
dashed	Whether line is dashed	boolean	false
orientation	Whether line is horizontal or vertical	`horizontal` \| `vertical`	`horizontal`	-
~~orientationMargin~~	The margin-left/right between the title and its closest border, while the `titlePlacement` 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	-
styles	Customize inline style for each semantic structure inside the component. Supports object or function.	Record<SemanticDOM, CSSProperties> \| (info: { props })=> Record<SemanticDOM, CSSProperties>	-
size	The size of divider. Only valid for horizontal layout	`small` \| `medium` \| `large`	-	5.25.0
titlePlacement	The position of title inside divider	`start` \| `end` \| `center`	`center`	-
~~type~~	The direction type of divider	`horizontal` \| `vertical`	`horizontal`	-
variant	Whether line is dashed, dotted or solid	`dashed` \| `dotted` \| `solid`	solid	5.20.0
vertical	Orientation, Simultaneously configure with `orientation` and prioritize `orientation`	boolean	false	-

Semantic DOM

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	PaddingInline<string \| number> \| undefined	1em
verticalMarginInline	Horizontal margin of vertical Divider	MarginInline<string \| number> \| undefined	8

Global TokenHow to use?

Token Name	Description	Type	Default Value
colorSplit	Used as the color of separator, this color is the same as colorBorderSecondary but with transparency.	string	rgba(5,5,5,0.06)
colorText	Default text color which comply with W3C standards, and this color is also the darkest neutral color.	string	rgba(0,0,0,0.88)
colorTextHeading	Control the font color of heading.	string	rgba(0,0,0,0.88)
fontFamily	The font family of Ant Design prioritizes the default interface font of the system, and provides a set of alternative font libraries that are suitable for screen display to maintain the readability and readability of the font under different platforms and browsers, reflecting the friendly, stable and professional characteristics.	string	-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'
fontSize	The most widely used font size in the design system, from which the text gradient will be derived.	number	14
fontSizeLG	Large font size	number	16
lineHeight	Line height of text.	number	1.5714285714285714
lineWidth	Border width of base components	number	1
margin	Control the margin of an element, with a medium size.	number	16
marginLG	Control the margin of an element, with a large size.	number	24
marginXS	Control the margin of an element, with a small size.	number	8