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
| Type | Description | |
|---|---|---|
| as | "div" | "hr" | "span" | HTML tag to render ('div' | 'hr' | 'span'). |
| dashed | boolean | Whether the divider should be dashed instead of solid. |
| data-testid | string | Optional test ID for testing frameworks. |
| decorative | boolean | Whether the divider is purely decorative. When true, it is hidden from assistive technology. Default: true |
| label | string | Accessible label for a meaningful separator. Only used when decorative is false. |
| labelledBy | string | ID of an element that labels this separator. Only used when decorative is false. |
| length | string | Length of the divider (e.g., "100%", "60px"). |
| orientation | OrientationType | Orientation of the divider ('horizontal' | 'vertical'). Default is 'horizontal'. |
| state | StateType | State of the divider ('success' | 'error' | 'warning' | 'disabled' | ''). |
| theme | ThemeType | Theme style to apply to the divider ('primary' | 'secondary' | 'tertiary' | 'quaternary' | 'clear'). |
| thickness | string | Thickness of the divider (e.g., "1px", "4px"). |