# Separator

- Page: <https://kznlabs.github.io/labsUI/components/separator>

## Separator (`separator`, component)

Server-safe hairline, horizontal or vertical, decorative by default, with an optional centered label like "or".

- Install: `npx @kznlabs/labsui add separator`
- Docs: <https://kznlabs.github.io/labsUI/components/separator>
- Brings: utils
- npm: clsx@^2.1.1, tailwind-merge@^3.7.0

### API

- `<Separator>` (+ <div> props)
  - `decorative?: boolean` = `true`: Purely visual (default). Set false when the line separates content for assistive tech.
  - `label?: string`: Centered text on the line, e.g. "or". Horizontal only.
  - `orientation?: "horizontal" | "vertical"` = `"horizontal"`: Direction of the line.

### Usage

```tsx
<Separator label="or" />
```

### Example: profile-links.tsx

```tsx
import { Separator } from "@/components/ui/separator";

export function ProfileLinks() {
  return (
    <div>
      <div className="flex h-5 items-center gap-3 text-sm">
        <a href="/docs">Docs</a>
        <Separator orientation="vertical" />
        <a href="/blog">Blog</a>
      </div>
      <Separator label="or" className="my-4" />
    </div>
  );
}
```