Separator

Horizontal

Default orientation="horizontal" — full container width, height 1 px.

Section one

Section two

tsx

import { Separator } from "~/components/ui/base/separator";

<div class="space-y-3">
  <p class="text-body text-label">Section one</p>
  <Separator />
  <p class="text-body text-label">Section two</p>
</div>

Vertical

In a row use items-stretch on the flex container so the line has the row height.

Left

Right

tsx

import { Separator } from "~/components/ui/base/separator";

<div class="flex h-12 items-stretch gap-3">
  <span class="flex items-center text-callout text-label">Left</span>
  <Separator orientation="vertical" />
  <span class="flex items-center text-callout text-label">Right</span>
</div>

Decorative

decorative sets role="none" — suitable when the separator is not a structural landmark.

// role="none" — removed from the accessibility tree (purely visual)

tsx

import { Separator } from "~/components/ui/base/separator";

<Separator decorative />
// role="none" — removed from the accessibility tree (purely visual)

Metadata

Source: meta.generated.json (see npm run generate)

File base/separator/meta.generated.json not found or path not allowed.