Divider
Divider visually separates content with a horizontal or vertical line. Supports color, alignment, and orientation options for flexible layouts.
Basic Usage
content
OR
content
Code Example
Basic.vue
Divider visually separates content with a horizontal or vertical line. Supports color, alignment, and orientation options for flexible layouts.
Divider is a standalone component.
The Divider component visually separates content. It supports horizontal and vertical orientation, color theming, and alignment. All props control appearance via Tailwind-compatible classes.
| Divider Props | Type | Description |
|---|---|---|
orientation | string | Sets the divider orientation to one of the below prop names. |
| horizontal | boolean | Sets orientation to horizontal. |
| vertical | boolean | Sets orientation to vertical. |
align | string | Aligns the divider content to one of the below props names. |
| center | boolean | Sets align to center. |
| start | boolean | Sets align to start. |
| end | boolean | Sets align to end. |
color | string | Sets the divider color to one of the below prop names. |
| neutral | boolean | Sets color to neutral. |
| primary | boolean | Sets color to primary. |
| secondary | boolean | Sets color to secondary. |
| accent | boolean | Sets color to accent. |
| success | boolean | Sets color to success. |
| warning | boolean | Sets color to warning. |
| info | boolean | Sets color to info. |
| error | boolean | Sets color to error. |
| Divider Slots | Description |
|---|---|
default | Content to display inside the divider (optional). |
A horizontal divider between sections.