Separator

Visual divider for separating content sections. Supports horizontal and vertical orientation with an optional centered label.

import { Separator } from 'phoundry-ui';

Basic Horizontal

Content above

Content below

Show code

<Separator />

With Label

Content above

Or continue with

Content below

Show code

<Separator label="Or continue with" />

Vertical

Home

Settings

Profile

Show code

<div class="flex items-center gap-4 h-8">
  <span>Home</span>
  <Separator orientation="vertical" />
  <span>Settings</span>
  <Separator orientation="vertical" />
  <span>Profile</span>
</div>

Center snippet (children)

Use children when the center needs richer markup than a plain string label.

Beta

Show code

<Separator>
  {#snippet children()}
    <Badge size="sm">Beta</Badge>
  {/snippet}
</Separator>

Props

Prop	Type	Default	Description
orientation	'horizontal' \| 'vertical'	'horizontal'	Direction of the divider.
label	string	—	Centered text label shown on the divider line.
children	Snippet	—	Custom content to display in the center instead of a label.
class	string	—	Additional CSS classes.

Usage tips

Use the label prop for “or” dividers in forms (e.g. “Or continue with”).
Vertical separators need a parent with explicit height and display: flex.
Pass a children snippet for custom center content (icons, badges, etc.).