Lapikit

Separator component

Separator

Displays a simple dividing line, customizable in orientation, color, thickness and position. Ideal for visually structuring sections of an interface.

[!INFO] The divider is purely decorative. It has no specific role or accessibility, but can be styled according to the context of use.

Examples of separator

Minimal use of component with default values. Displays a standard horizontal line.

Allows you to display a vertical separator by setting the orientation. Useful in column layouts or sidebars.

Customize the color of the separator using the color prop. You can use a color name, a CSS variable or a hexadecimal code.

Adds a horizontal indent (left/right) when the separator is horizontal. Ideal for preventing it from touching the edges of a container.

Shows how to play with transparency via CSS classes or in combination with prop color. Useful for softening visual separation.

Controls the thickness of the separator via prop thickness. Perfect for accentuating or softening the demarcation depending on use.

props	type	description	default	type_extend
ref $bindable	HTMLElement	Direct access to DOM element	undefined
is	enum	Makes the component `<hr>` or `<div>`.	`hr`	`hr` \| `div`
dark	boolean	Enable dark theme for component.	false
light	boolean	Enable light theme for the component.	false
color	string	Applies a custom color of separator.	undefined
inset	boolean	Applies a horizontal indentation for horizontal separators	false
thickness	string	Checks separator thickness	undefined
orientation	enum	Defines separator orientation	undefined	`horizontal` \| `vertical`

variable	default	description
`–-separator-color`	`–-kit-scrim`	Color of separator
`–-separator-opacity`	`0.12`	Opacity of separator

To organize your data, combine Separators with List for greater legibility.