Display

Separator

Divides content into groups, across or down, with a word in the middle when it helps.

Installation

npx sinaui add separator

Copy src/lib/ui/Separator.svelte and tokens.css. No dependencies.

Examples

Across

Between sections of a card or page.

Book of Optics

Ibn al-Haytham, Cairo, completed around 1021.

Seven books on light, vision and the eye.

<script lang="ts">
	import Separator from '#lib/ui/Separator.svelte';
</script>

<div class="card">
	<div>
		<h3>Book of Optics</h3>
		<p>Ibn al-Haytham, Cairo, completed around 1021.</p>
	</div>
	<Separator />
	<p>Seven books on light, vision and the eye.</p>
</div>

<style>
	.card {
		display: grid;
		gap: 1rem;
		inline-size: min(100%, 24rem);
	}
	h3 {
		margin: 0;
		font-size: 1rem;
	}
	p {
		margin: 0.25rem 0 0;
		color: var(--ui-muted);
		font-size: 0.875rem;
	}
</style>

Down

Between links or actions in a row.

<script lang="ts">
	import Separator from '#lib/ui/Separator.svelte';
</script>

<nav aria-label="Manuscript" class="links">
	<a href="#vertical">Read</a>
	<Separator orientation="vertical" />
	<a href="#vertical">Cite</a>
	<Separator orientation="vertical" />
	<a href="#vertical">Share</a>
</nav>

<style>
	.links {
		display: flex;
		align-items: center;
		gap: 0.75rem;
		font-size: 0.875rem;
	}
</style>

With words

For a choice between two ways of doing the same thing.

<script lang="ts">
	import Button from '#lib/ui/Button.svelte';
	import Input from '#lib/ui/Input.svelte';
	import Separator from '#lib/ui/Separator.svelte';
</script>

<div class="stack">
	<Button variant="secondary">Continue with your library card</Button>
	<Separator>or</Separator>
	<Input label="Email" type="email" autocomplete="email" />
	<Button>Send sign-in link</Button>
</div>

<style>
	.stack {
		display: grid;
		gap: 1rem;
		inline-size: min(100%, 22rem);
	}
</style>

Props

Prop	Type	Default
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`
`children`	`Snippet`: words in the middle

Accessibility

Read as a separator, with its direction, so screen reader users hear where one group ends.
With words, the line is drawn around them and the words are read as ordinary text.