Divider

A divider line separates different content.

When to use

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

The size of the spacing.

Use orientation="vertical" or vertical to make the divider vertical.

You can customize the semantic dom style of divider by passing objects/functions through classNames and styles.

Divider with inner title, set titlePlacement="start/end" 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.

Divider and DividerProps are exported from @ceebee/ui/client.

Property	Description	Type	Default	Version
`children`	The wrapped title	`ReactNode`	`-`	—
`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`	`false`	4.2.0
`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`	-

The server-safe Ceebee Divider remains at @ceebee/ui; use @ceebee/ui/client for the complete contract.