Separator

Semantic or decorative divider in either orientation.

Projects

Members

Installation

pnpm dlx @mielui/svelte add separator

Usage

Separator renders a semantic separator by default. Set decorative when spacing and styling already convey the grouping, so assistive technology skips it. A horizontal separator fills the available width; orientation="vertical" needs a surrounding row with a defined height. class, style, other attributes, and bind:element go to the divider element.

<script lang="ts">
    import { Separator } from '@mielui/svelte/components/separator';
</script>

<Separator />
<Separator orientation="vertical" decorative />

Examples

Both orientations

A horizontal separator splits a heading from a row, and a decorative vertical one splits the two items in that row.

Workspace

Projects Members

Horizontal sections

Notifications

Choose which updates you receive.

Privacy

Manage who can see your activity.

API reference

Separator

id

string
Id of the element.
style

string | StyleProperties | null
Inline styles for the element.
orientation

Orientation
The orientation of the separator.

Default 'horizontal'
decorative

boolean
Whether the separator is decorative and should be hidden from assistive technologies.
element Bindable

HTMLDivElement | null
Bindable reference to the DOM element.

Default null