# Separator

A thin line that divides two groups of content.

```tsx
import { Separator } from 'ferry-ui'

export default function SeparatorHero() {
  return (
    <div className="w-full max-w-xs">
      <div className="text-sm font-medium text-foreground">Workspace settings</div>
      <p className="text-[13px] text-foreground-light">The name, the members and the plan.</p>
      <Separator className="my-4" />
      <div className="flex gap-4 text-sm text-foreground-light">
        <span>General</span>
        <span>Members</span>
        <span>Billing</span>
      </div>
    </div>
  )
}
```

## Usage guidelines

- **A line between two groups.** Use a separator to divide content in a row or in a column.
- **In a container, use a border.** For the rows of a card or a list, use the `border-t` or `divide-y` classes.
- **Space needs no line.** To put only space between two sections, use a margin or a gap.

## Anatomy

Import the component. A separator has one part.

```tsx title="Anatomy"

<Separator />
```

## Examples

### Vertical

Set `orientation="vertical"` to divide the items of a row. A vertical separator takes the full height of its parent. Give the parent a height.

```tsx
import { Separator } from 'ferry-ui'

export default function SeparatorVertical() {
  return (
    // The parent has a height: the lines take this height.
    <div className="flex h-5 items-center gap-3 text-sm text-foreground-light">
      <span>12 members</span>
      <Separator orientation="vertical" />
      <span>3 projects</span>
      <Separator orientation="vertical" />
      <span>Pro plan</span>
    </div>
  )
}
```

### Margin

A separator is 1px thick and has no margin. Add the space with a margin class, such as `my-3`.

```tsx
import { Separator } from 'ferry-ui'

export default function SeparatorSpacing() {
  return (
    <div className="w-full max-w-xs text-sm">
      <div className="flex justify-between">
        <span className="text-foreground-light">Plan</span>
        <span className="text-foreground">Pro</span>
      </div>
      <Separator className="my-3" />
      <div className="flex justify-between">
        <span className="text-foreground-light">Seats</span>
        <span className="tabular text-foreground">8 of 10</span>
      </div>
      <Separator className="my-3" />
      <div className="flex justify-between">
        <span className="text-foreground-light">Next invoice</span>
        <span className="text-foreground">Nov 1</span>
      </div>
    </div>
  )
}
```

### Separator with a meaning

By default, a separator is only a visual line. If the split has a meaning, set `decorative={false}`. Use it between the groups of actions of a toolbar.

```tsx
import { Button, Separator } from 'ferry-ui'
import { Bold, Italic, Link2, List, ListOrdered, Underline } from 'lucide-react'

export default function SeparatorToolbar() {
  return (
    <div
      role="toolbar"
      aria-label="Text format"
      className="flex h-9 items-center gap-1 rounded-md border bg-surface-100 px-1"
    >
      <Button variant="ghost" size="icon-tiny" icon={<Bold />} aria-label="Bold" />
      <Button variant="ghost" size="icon-tiny" icon={<Italic />} aria-label="Italic" />
      <Button variant="ghost" size="icon-tiny" icon={<Underline />} aria-label="Underline" />
      {/* decorative={false}: screen readers get the split between the groups. */}
      <Separator orientation="vertical" decorative={false} className="mx-1 h-4" />
      <Button variant="ghost" size="icon-tiny" icon={<List />} aria-label="Bulleted list" />
      <Button variant="ghost" size="icon-tiny" icon={<ListOrdered />} aria-label="Numbered list" />
      <Separator orientation="vertical" decorative={false} className="mx-1 h-4" />
      <Button variant="ghost" size="icon-tiny" icon={<Link2 />} aria-label="Insert link" />
    </div>
  )
}
```

## Accessibility

- By default, screen readers do not see a separator.
- With `decorative={false}`, the separator has the `separator` role. This role helps the users of screen readers to find the groups of controls.

## API reference

`Separator` also accepts the props of its Radix UI primitive.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `orientation` | `"horizontal" \| "vertical"` | `horizontal` | Either `vertical` or `horizontal`. Defaults to `horizontal`. |
| `decorative` | `boolean` | `true` | Whether or not the component is purely decorative. When true, accessibility-related attributes are updated so that that the rendered element is removed from the accessibility tree. |
| `asChild` | `boolean` |  |  |