# Separator: Inline

> Use `render` to output a `<span>` where a `<div>` isn't allowed, like inside a paragraph.

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

## Add this example

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

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

## Source

```tsx title="components/examples/separator/render.tsx"
import { Separator } from "@/components/ui/separator"

export function SeparatorRender() {
  return (
    <p className="text-sm text-muted-foreground">
      <span className="inline-flex h-4 items-center gap-2 align-middle">
        <span>Ada Park</span>
        <Separator orientation="vertical" decorative render={<span />} />
        <time dateTime="2026-10-05">Oct 5, 2026</time>
        <Separator orientation="vertical" decorative render={<span />} />
        <span>4 min read</span>
      </span>
    </p>
  )
}
```

## Props in this example

### Separator

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` |  |
| `decorative` | `boolean` | `false` | Hide the line from screen readers when it is only visual. |
| `render` | `ReactElement \| (props, state) => ReactElement` | `<div>` |  |

## More Separator examples

- [Vertical](https://hextaui.com/docs/separator/examples/vertical.md)
- [Label](https://hextaui.com/docs/separator/examples/label.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)
- [Long content](https://hextaui.com/docs/separator/examples/long-content.md)
- [Right to left](https://hextaui.com/docs/separator/examples/rtl.md)