Separator

Draws a hairline between two groups of content, with an optional word on it.

<script setup lang="ts">
import { FsSeparator } from '@fivespark/ui'
</script>

<template>
  <div class="flex w-full max-w-sm flex-col gap-3">
    <p class="type-body">Offerte 2026-0117</p>
    <FsSeparator />
    <p class="type-body">Bouwbedrijf Jansen B.V.</p>
  </div>
</template>

Usage

<script setup lang="ts">
import { FsSeparator } from '@fivespark/ui'
</script>

<template>
  <FsSeparator />
</template>

The separator has no margin: the container spaces it, for example with gap. A break that has a title is a heading, not a separator.

Examples

Vertical

Place a vertical separator directly in a flex or grid row. It stretches to the height of the row.

<script setup lang="ts">
import { FsSeparator } from '@fivespark/ui'
</script>

<template>
  <div class="type-body flex gap-3">
    <span>Concept</span>
    <FsSeparator orientation="vertical" />
    <span>12 regels</span>
    <FsSeparator orientation="vertical" />
    <span>€ 4.250,00</span>
  </div>
</template>

With a label

A short word such as "of" between two lines, for two alternatives. Horizontal only.

<script setup lang="ts">
import { FsSeparator } from '@fivespark/ui'
</script>

<template>
  <div class="flex w-full max-w-sm flex-col gap-3">
    <p class="type-body">Bestaande klant kiezen</p>
    <FsSeparator label="of" />
    <p class="type-body">Nieuwe klant aanmaken</p>
  </div>
</template>

Announced to screen readers

By default a separator is hidden from screen readers. Use :decorative="false" only for a break that no heading, list or group already marks.

<script setup lang="ts">
import { FsSeparator } from '@fivespark/ui'
</script>

<template>
  <div class="flex w-full max-w-sm flex-col gap-3">
    <p class="type-body">Offerte 2026-0117 is verstuurd.</p>
    <FsSeparator :decorative="false" />
    <p class="type-body">Voorwaarden: betaling binnen 14 dagen.</p>
  </div>
</template>

API Reference

FsSeparator

Prop	Type	Default	Description
orientation	"vertical" | "horizontal"	"horizontal"	`vertical` between items in a row. It stretches to the row's height, so place it directly in a flex or grid container.
decorative	boolean	true	Hidden from screen readers. `false` only for a break that no heading, list, group or menu section already marks.
label	string		Text between two lines, such as "of", read as ordinary text. Horizontal only.