Layout

Separator

A 1px line between groups.

import { Separator } from "@flinbu/seed";

Horizontal and vertical

Above

Tokens

Components

Docs

import { Separator } from "@flinbu/seed";

<div className="flex w-full max-w-sm flex-col gap-sm">
  <span className="body-body-3-regular text-secondary">Above</span>
  <Separator />
  <div className="flex h-(--size-xl) items-center gap-sm body-body-3-regular text-secondary">
    Tokens <Separator orientation="vertical" /> Components <Separator orientation="vertical" /> Docs
  </div>
</div>

Use it for

Between menu groups, toolbar sections and stacked content.

Props

Prop	Type	Default	Description
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Direction.
`decorative`	`boolean`	`true`	false exposes role separator.
`className`	`string`	`none`	Extra classes. They win over Seed's, so you can adjust one thing without forking.

Accessibility

Decorative by default; decorative={false} exposes role separator.