Divider

Import

import { Divider } from 'tuimorphic';

Usage

The Divider component separates content sections with a simple line in either horizontal or vertical orientation.

Content above the divider.

Content below the divider.

<Divider />

Props

Prop	Type	Default	Description
orientation	`'horizontal' \| 'vertical'`	`'horizontal'`	Orientation of the divider
className	`string`	-	Additional CSS class names

Variants

Horizontal

Content above the divider.

Content below the divider.

<p>Content above</p>
<Divider />
<p>Content below</p>

Vertical

Left content

Right content

<div style={{ display: 'flex', alignItems: 'center', height: '50px' }}>
  <span>Left</span>
  <Divider orientation="vertical" />
  <span>Right</span>
</div>

In Card Layout

USER PROFILE

Name: John Doe

Role: Administrator

Email: [email protected]

Status: Active

<Card title="Settings">
  <p>General settings</p>
  <Divider />
  <p>Advanced settings</p>
</Card>