# Separator: Label

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

Example: https://hextaui.com/docs/separator/examples/label
Component docs: https://hextaui.com/docs/separator.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/separator-label.json
```

This adds `components/examples/separator/label.tsx` with the Separator component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/separator/label.tsx"
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>
  )
}
```

## More Separator examples

- [Vertical](https://hextaui.com/docs/separator/examples/vertical.md)
- [Align](https://hextaui.com/docs/separator/examples/align.md)
- [Vertical label](https://hextaui.com/docs/separator/examples/vertical-label.md)
- [Decorative](https://hextaui.com/docs/separator/examples/decorative.md)
- [Inline](https://hextaui.com/docs/separator/examples/render.md)
- [Long content](https://hextaui.com/docs/separator/examples/long-content.md)
- [Right to left](https://hextaui.com/docs/separator/examples/rtl.md)