Divider

Name: Boreal UI
Author: Davin Chiupka

The Divider component provides a visual separation between sections, with customizable orientation, length, thickness, and style.

Usage & Examples

Above

Below

default.tsx

<Divider orientation="horizontal" length="100%" thickness="1px" />

Divider props API
				Default	Description
`as`	`"div" \| "hr" \| "span"`	No	props	`"div"`	HTML tag to render ('div' \| 'hr' \| 'span').
`className`	`string`	No	styling	`—`	Additional CSS class names for the divider root.
`dashed`	`boolean`	No	props	`false`	Whether the divider should be dashed instead of solid.
`data-testid`	`string`	No	testing	`—`	Backward-compatible alias for test ID attributes.
`decorative`	`boolean`	No	props	`true`	Whether the divider is purely decorative. When true, it is hidden from assistive technology. Default: true
`label`	`string`	No	props	`—`	Accessible label for a meaningful separator. Only used when decorative is false.
`labelledBy`	`string`	No	props	`—`	ID of an element that labels this separator. Only used when decorative is false.
`length`	`string`	No	props	`"100%"`	Length of the divider (e.g., "100%", "60px").
`orientation`	`OrientationType`	No	props	`"horizontal"`	Orientation of the divider ('horizontal' \| 'vertical'). Default is 'horizontal'.
`state`	`StateType`	No	styling	`—`	State of the divider ('success' \| 'error' \| 'warning' \| 'info' \| 'disabled' \| '').
`testId`	`string`	No	props	`dataTestId ?? "divider"`	Optional test ID for testing frameworks.
`theme`	`ThemeType`	No	styling	`configured default theme (fallback: "primary")`	Theme style to apply to the divider ('primary' \| 'secondary' \| 'tertiary' \| 'quaternary' \| 'clear').