Components

Separator component

On this page

The kit:separator component renders a thin horizontal or vertical dividing line.

Above the separator

Below the separator

<div style="max-width: 320px; display: flex; flex-direction: column; gap: 0.75rem;">
	<span>Above the separator</span>
	<kit:separator />
	<span>Below the separator</span>
</div>

kit:separator renders as <hr> by default. It sets role="separator" and aria-orientation automatically. The color and opacity are token-based and can be overridden per-instance.

Examples of separator

orientation

orientation: 'horizontal' | 'vertical' = 'horizontal'

Vertical separators are inline-flex and stretch to fill their container’s height.

<div style="display: flex; align-items: center; gap: 1rem; height: 2.5rem;">
	<span>Home</span>
	<kit:separator orientation="vertical" />
	<span>About</span>
	<kit:separator orientation="vertical" />
	<span>Contact</span>
</div>

inset

Adds a leading margin to indent the separator from the left edge useful inside lists.

inset: boolean = false

<div style="max-width: 320px;">
	<div style="padding: 0.75rem 1rem;">Item one</div>
	<kit:separator inset />
	<div style="padding: 0.75rem 1rem;">Item two</div>
	<kit:separator inset />
	<div style="padding: 0.75rem 1rem;">Item three</div>
</div>

Without preprocess Lapikit

If you aren’t using the Lapikit preprocessor in svelte.config.js, import the components directly:

import { Separator } from 'lapikit/components';

API Reference

kit:separator

props	type	description	default
ref $bindable	`HTMLElement`	Bindable reference to the rendered DOM element.	`null`
is	enum	HTML element to render.	`'hr'`
s-class	enum	Sets className on separator.
s-style	enum	Sets styles on separator.
orientation	enum	Direction of the separator.	`'horizontal'`
inset	`boolean`	Adds a leading indent.	`false`
thickness	`string \| number`	Border width override (px number or CSS string).
color	`string`	Color override (`--kit-separator-color`).

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