104Get started
HextaUI

Separator: Vertical label

A vertical separator with a label keeps the text upright and draws the line above and below it.

or
Drop a file here
import { Button } from "@/components/ui/button"
import { Separator } from "@/components/ui/separator"

export function SeparatorVerticalLabel() {
  return (
    <div className="flex items-stretch gap-4">
      <div className="flex w-32 flex-col gap-2">
        <Button variant="outline">Upload file</Button>
        <Button variant="outline">Browse library</Button>
      </div>
      <Separator orientation="vertical">or</Separator>
      <div className="flex w-32 items-center justify-center rounded-lg border border-dashed p-4 text-center text-sm text-muted-foreground">
        Drop a file here
      </div>
    </div>
  )
}

Add this example

This adds the example as components/examples/separator/vertical-label.tsx, together with the Separator component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/separator-vertical-label.json

To add only the component, follow the Separator installation.

Props in this example

The Separator props this example sets, from the API reference.

Separator

PropTypeDefault
orientation
"horizontal" | "vertical""horizontal"

Every prop is in the Separator API reference.

More Separator examples

See them all, with keyboard support and accessibility notes, on the Separator page.

Related components