104Get started
HextaUI

Separator: Label

Children sit in the middle of the line, with the line filling the space on both sides.

Or continue with
import { Button } from "@/components/ui/button"
import { Separator } from "@/components/ui/separator"

export function SeparatorLabel() {
  return (
    <div className="flex w-full max-w-xs flex-col gap-4">
      <Button>Continue with email</Button>
      <Separator>Or continue with</Separator>
      <div className="grid grid-cols-2 gap-2">
        <Button variant="outline">GitHub</Button>
        <Button variant="outline">Google</Button>
      </div>
    </div>
  )
}

Add this example

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

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

To add only the component, follow the Separator installation.

More Separator examples

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

Related components