Divider

The Divider component is used to visually separate sections of content or layouts. It provides a clean, minimal way to organize information into distinct groups, helping improve readability and structure.

Example

Below is an example of the divider component.

import "spatial-design-system/primitives/ar-divider.js";

<a-ar-divider
    position="0 1.6 -1"
    vertical="false"
    opacity="1"
    length="medium"
    thickness="0.003"
    color="#ECECEC"
></a-ar-divider>

Props

Property	Type	Default	Description
visible	boolean	true	Controls whether the divider is visible.
position	number[]	0 0 0	Sets the divider’s position in 3D space.
opacity	number	1	Specifies the opacity of the component.
color	string (blue, #fff)	#545454	Defines the color of the divider.
length	enum (small, medium, large) or number	medium	Specifies the length of the divider. You can use one of the predefined sizes (small, medium, or large) or provide a custom numeric value. The default unit is meters.
thickness	number	0	Specifies the thickness of the divider in meters. If set to 0, a default thickness is applied based on the current length value.
vertical	boolean	false	When set to true, displays divider vertically.