Primitives

Separator

A thin line that divides two groups of content.

Workspace settings

The name, the members and the plan.

GeneralMembersBilling

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.

Anatomy

import { Separator } from 'ferry-ui'

<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.

12 members

3 projects

Pro plan

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.

PlanPro

Seats8 of 10

Next invoiceNov 1

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.

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
`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	-
See the element or the Radix UI primitive this part renders.

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> ) }