Divider
The Divider component provides a visual separation between sections, with customizable orientation, length, thickness, and style.
Usage
Default
Above
Below
<Divider orientation="horizontal" length="100%" thickness="1px" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| orientation | "horizontal" | "vertical" | "horizontal" | Orientation of the divider: horizontal or vertical. |
| theme | "primary" | "secondary" | "tertiary" | "quaternary" | "clear" | Configured Default | Color theme of the divider. |
| state | "" | "success" | "error" | "warning" | - | Visual state style (success, error, warning). |
| length | string | "100%" | Length of the divider (CSS value: px, %, rem, etc.). |
| thickness | string | "1px" | Thickness of the divider line (CSS value: px, em, etc.). |
| dashed | boolean | false | Display a dashed line instead of solid. |
| as | "div" | "hr" | "span" | "div" | Render as a specific HTML element (e.g., 'hr', 'div', 'span'). |
| className | string | - | Custom CSS class for the divider. |
| data-testid | string | "divider" | Test id for the divider element. |