Divider

Dividers help you bring rhythm and clarity to your interfaces by separating elements. Separation of elements also comes in pair with the grouping of ones, thus a powerful tool to raise your information architecture.

Sizes

The divider comes in three sizes. By default, the divider comes in medium size.

Small

Medium

Large

<Divider size="small"></Divider>
<Divider size="medium"></Divider>
<Divider size="large"></Divider>

Orientation

The divider can be used in two main directions: horizontal and vertical. By default, the divider comes in horizontal orientation.

Horizontal

Vertical

<Divider orientation="horizontal"></Divider>
<Divider orientation="vertical"></Divider>

Shape

The divider can be used in two main shapes: rounded and sharp. By default, the divider has a rounded border.

Rounded

sharp

<Divider shape="rounded"></Divider>
<Divider shape="sharp"></Divider>

API

The Divider component accepts all the props a standard <div> does in React (HTML, ARIA, data attributes, and event handlers). Its props are typed as React.HTMLAttributes<HTMLDivElement>. See more about supported HTML props in React's documentation.

However, Divider doesn't accept any children.

Loading API documentation...