Divider #

Divider are used to group content horizontally or vertically.

Import #

Examples #

Basic #

Divider with Label #

Appearance #

Sizes #

Colors #

Vertical Divider #

Props #

<Divider> #

Property	Type	Description	Version
appearance	'solid' | 'dashed' | 'dotted'	The appearance of the divider
as	ElementType (div)	You can use a custom element for this component
classPrefix	string ('divider')	The prefix of the component CSS class
color	Color | CSSProperties['color']	The color of the divider
label	ReactNode	The content of the label
labelPlacement	'start' | 'center' | 'end'	The placement of the label
size	'xs' | 'sm' | 'md' | 'lg' | number | string	The size of the divider
spacing	'xs' | 'sm' | 'md' | 'lg' | number | string	The spacing between the divider and its content
vertical	boolean	Vertical dividing line. Cannot be used with label

Color #

type Color = 'red' | 'orange' | 'yellow' | 'green' | 'cyan' | 'blue' | 'violet';