Divider

A minimal horizontal separator with optional centered content.

Demo

Hello World

<script lang="ts">
  import * as Null from "#lib/index.js";
</script>

<Null.Divider>Hello World</Null.Divider>

Divider.svelte

<script lang="ts">
    import type { Snippet } from "svelte";
    import type { HTMLAttributes } from "svelte/elements";

    let {
        children,
        class: className = "",
        ...rest
    }: HTMLAttributes<HTMLDivElement> & {
        children?: Snippet;
    } = $props();
</script>

<div {...rest} class="divider">
    <hr class={`line ${className}`} aria-hidden="true" />

    {#if children}
        <div class="label">
            {@render children()}
        </div>
    {/if}

    <hr class={`line ${className}`} aria-hidden="true" />
</div>

<style>
    .divider {
        display: flex;
        align-items: center;
        width: 100%;
    }

    .line {
        flex: 1;
        min-width: 0;
        height: 1px;
        margin: 0;
        border: 0;
        background: var(--divider-color, var(--foreground, currentColor));
    }

    .label {
        flex-shrink: 0;
        margin-inline: 0.5rem;
        white-space: nowrap;
        font-size: 14px;
    }
</style>