Separator
Visually divides or groups content
Theme
<sa-linkbutton variant="ButtonVariant.Outline" href="#">View bookings</sa-linkbutton>
<sa-separator/>
<sa-linkbutton variant="ButtonVariant.Outline" href="#">View past trips</sa-linkbutton>Usage
Visually separates a group of adjacent elements with a horizontal or vertical line.
<sa-separator/>Examples
Horizontal
A horizontal separator between blocks of text.
Theme
<div class="flex flex-col gap-4 text-sm">
<div class="flex flex-col gap-1">
<div class="leading-none font-medium">Voyager Travel</div>
<div class="text-muted-foreground">
Journeys worth remembering
</div>
</div>
<sa-separator/>
<div>
Voyager Travel plans tailor-made itineraries, from weekend city breaks to month-long expeditions, with a
dedicated travel consultant for every booking.
</div>
</div>Vertical
Set orientation="SeparatorOrientation.Vertical" to divide inline items. The container needs a height for the line to be visible.
Theme
<div class="flex h-5 items-center gap-4 text-sm">
<div>Flights</div>
<sa-separator orientation="SeparatorOrientation.Vertical"/>
<div>Hotels</div>
<sa-separator orientation="SeparatorOrientation.Vertical"/>
<div>Packages</div>
</div>Vertical menu
Vertical separators between the entries of a horizontal menu.
Theme
<div class="flex items-center gap-2 text-sm md:gap-4">
<div class="flex flex-col gap-1">
<span class="font-medium">Settings</span>
<span class="text-muted-foreground text-xs">
Manage preferences
</span>
</div>
<sa-separator orientation="SeparatorOrientation.Vertical" />
<div class="flex flex-col gap-1">
<span class="font-medium">Account</span>
<span class="text-muted-foreground text-xs">
Profile & security
</span>
</div>
<sa-separator orientation="SeparatorOrientation.Vertical" />
<div class="flex flex-col gap-1">
<span class="font-medium">Help</span>
<span class="text-muted-foreground text-xs">Support & docs</span>
</div>
</div>In a list
Horizontal separators between the rows of a definition list.
Theme
<div class="w-[400px] flex flex-col gap-2 text-sm">
<dl class="flex items-center justify-between">
<dt>Booking reference</dt>
<dd class="text-muted-foreground">VT-48213</dd>
</dl>
<sa-separator/>
<dl class="flex items-center justify-between">
<dt>Travellers</dt>
<dd class="text-muted-foreground">2 adults</dd>
</dl>
<sa-separator/>
<dl class="flex items-center justify-between">
<dt>Departure</dt>
<dd class="text-muted-foreground">12 Mar 2026</dd>
</dl>
</div>API Reference
<sa-separator>
Renders a <div> element with role="separator".
Prop
Type