Divider

It's a line.

<script>
	import { Divider } from '$lib/components/divider';
</script>

<Divider />

Component API

Prop	Default	Description
Divider extends the JSX <hr> element
soft	false	Whether the divider should use a softer color.

Examples

Basic example

Use the Divider component to add a horizontal rule between items:

<script>
	import { Divider } from '$lib/components/divider';
</script>

<Divider />

With reduced contrast

Use the soft prop for secondary dividers:

<script>
	import { Divider } from '$lib/components/divider';
</script>

<Divider soft />

With spacing

Use utility classes like my-* to control the vertical spacing around a divider:

<script>
	import { Divider } from '$lib/components/divider';
</script>

<Divider class="my-6" />