Divider

Divider is a simple component that can be used to divide sections in your app

Basic example

Divider component has a label, and a line that spans the rest of the width.

In case you want the simple line, leave out the label prop.

This is a basic divider

Label position

Label can be positioned left (default), center or right.

Label left (default)

Center label

Right label

Color variants

There are 5 available color variants for the divider: plain (default), primary, secondary, success, danger, text

Plain (default) variant

Primary variant

Secondary variant

Success variant

Danger variant

Text variant

Divider size

Size props have effect only on the label's font size. There are 3 available sizes: sm (default), normal and md

Small size divider

Normal size divider

Medium size divider

Vertical divider

A vertical divider will only work inside the flex container with row direction and cannot have a label.

DIV

DIV

Props reference

Property	Type	Default	Accepts	Description
label	String	empty	Any string	Text that will be displayed in divider.
position	String	left	left, center, right	Position of the text
variant	String	plain	plain, primary, secondary, success, danger, text	A color variant of the label. The color will be applied to both text and line.
size	String	sm	sm, normal,md`	Size of the label text
vertical	Boolean	false	true or false	Denotes if it should be a vertical divider