ComponentsDivider
Divider
A customizable divider to separate content horizontally or vertically
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.
Props
The Divider component accepts the following props:
| Name | Type | Default | Description |
|---|---|---|---|
| className | string | Custom CSS classes to apply to the divider | |
| text | string | Text to display between the divider lines | |
| vertical | boolean | false | Whether the divider should be vertical or horizontal |
| color | string | gray | The color scheme of the divider |
| opacity | number | 70 | The opacity level of the divider (0-100) |
| margin | string | Margin to apply to the divider | |
| width | string | Width of the divider | |
| noWrap | boolean | false | Whether to prevent text wrapping in the divider text |
Usage Examples
Horizontal Divider
Vertical Divider
Divider with Text
With Text
Custom Divider
Tip!
Use the color prop to change the color of the divider
(primary, purple, red, etc).