Runway

With Text

The Divider component is a simple horizontal or vertical line that separates content. It can be customized with different colors, opacity levels, and text.

Use the opacity prop to change the opacity of the divider (0-100).

Usage

javascript
1import Divider from '@/components/atoms/Divider';
2
3<Divider />

Use the text prop to add text to the divider.

Props

The Divider component accepts the following props:

Name	Type	Default	Description
color	string	`"primary"`	The base color (use tailwind.config).
text	string	`""`	Text to display in the divider.
opacity	number	`100`	Opacity of the divider (0-100).
margin	number	`2`	The margin around the divider (in px).
width	number	`0.5`	The width of the divider (in rem).
height	string	`"full"`	The height of the divider (uses Tailwind height classes).
vertical	boolean	`false`	If true, the divider will be vertical.
noWrap	boolean	`true`	If true, the text will not wrap.
className	string	`""`	Additional Tailwind utility classes.
...props	object	-	Any other valid HTML attributes for the `button` or `Link`.

Examples

Horizontal Divider

Vertical Divider

Text on the left

Text on the right

Divider with Text

With Text

Custom Divider

Use the color prop to change the color of the divider ("primary", "purple", "red", etc).