Separator

A visual divider that separates content into distinct sections, available in horizontal or vertical orientations.

Anatomy

<script>
  import { Separator } from "@saas-ui/svelte/components/separator";
</script>

<Separator orientation="horizontal" variant="solid" size="sm" />

Examples

Basic Accessibility

Basic separator with default styling.

<Stack gap={2}>
	<Text>First</Text>
	<Separator />
	<Text>Second</Text>
	<Separator />
	<Text>Third</Text>
</Stack>

Colours Accessibility

Use the colour prop to change the colour of the separator.

<Stack gap={2} class="items-start">
	{#each colours as colour}
		<Group gap={10} class="items-center px-4">
			<Text class="min-w-[8ch]">{colour}</Text>
			<Separator class="w-32" {colour} />
		</Group>
	{/each}
</Stack>

Label Accessibility

Use separators with text labels for visual grouping.

<Stack gap={2}>
	<Group gap={2} class="items-center">
		<Text class="shrink-0">Label (start)</Text>
		<Separator class="flex-1" />
	</Group>
	<Group gap={2} class="items-center">
		<Separator class="flex-1" />
		<Text class="shrink-0">Label (end)</Text>
	</Group>
	<Group gap={2} class="items-center">
		<Separator />
		<Text class="shrink-0">Label (center)</Text>
		<Separator />
	</Group>
</Stack>

Sizes Accessibility

Use the size prop to change the thickness of the separator.

<Stack gap={4}>
	{#each separatorSizes as size}
		<Stack gap={1}>
			<Text size="xs" class="text-fg-muted">{size}</Text>
			<Separator {size} />
		</Stack>
	{/each}
</Stack>

Variants Accessibility

Use the variant prop to change the line style.

<Stack gap={2}>
	{#each separatorVariants as variant}
		<Separator {variant} />
	{/each}
</Stack>

Vertical Accessibility

Use orientation="vertical" for vertical separators.

<Group gap={4} class="items-center">
	<Text>First</Text>
	<Separator orientation="vertical" />
	<Text>Second</Text>
</Group>

Props

Prop	Type	Default	Description
`orientation`	`horizontal \| vertical`	`horizontal`	The orientation of the separator.
`variant`	`solid \| dashed \| dotted`	`solid`	The visual variant of the separator.
`size`	`xs \| sm \| md \| lg`	`sm`	The thickness of the separator.
`colour`	`gray \| red \| orange \| yellow \| green \| teal \| blue \| cyan \| purple \| pink \| rose`	-	The colour of the separator.
`class`	`text`	-	CSS class to apply to the component.