# Separator

> A React separator: a thin divider between groups of content, horizontal or vertical, solid, dashed or dotted, with an optional label.

- Type: React component (Layout)
- Access: Free (the source is open to everyone)
- Version: 1.0.0
- Install: `npx wingo-ui@latest add separator`
- Docs: https://wingo-ui.com/components/separator

## Interaction

It is a quiet line, nothing to press. Give it a label and the text or icon sits in the line, centered or near one end, as plain text or a small pill. Vertical separators stretch to the height of the row they sit in, or take the height you give them with a className. Screen readers skip a decorative line and read its label as plain text; with decorative off it is announced as a separator named by its label. The demo around it is a real sign-in card: the buttons load, the email field validates, Enter sends. In the toolbar example the arrow keys, Home and End move between the buttons.

## Installation

```bash
npx wingo-ui@latest add separator
```

The CLI adds the files, their dependencies and a version record for updates.

With shadcn: `npx shadcn@latest add https://wingo-ui.com/r/separator.json`

Files:

- `components/ui/separator.tsx`

npm dependencies: `npm i @radix-ui/react-separator`

Wingo UI dependencies (installed automatically):

- [Tones](https://wingo-ui.com/components/tones) ([Markdown](https://wingo-ui.com/components/tones.md))
- [UIProvider](https://wingo-ui.com/components/ui-config) ([Markdown](https://wingo-ui.com/components/ui-config.md))

## Usage

```tsx
import { Separator } from "@/components/ui/separator"

export function MetaRow() {
  return (
    <div className="flex flex-col gap-4">
      <div className="flex items-center gap-3 text-sm text-muted-foreground">
        <span>Brooklyn</span>
        <Separator orientation="vertical" className="h-3.5 self-center" />
        <span>today, 2:20 PM</span>
        <Separator orientation="vertical" className="h-3.5 self-center" />
        <span>$1,200</span>
      </div>
      <Separator label="or" />
      <Separator tone="danger" variant="dashed" label="Danger zone" labelPosition="start" />
    </div>
  )
}
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `label?` | `ReactNode` | `""` | Text or an icon in the line, like "or", a date or a <Star />. An empty string or no label draws the plain line. The playground falls back to "or". |
| `variant?` | `"solid" \| "dashed" \| "dotted"` | `"solid"` | Line style. Dashed and dotted are drawn with a border so the pattern stays crisp; in neutral they are a step darker so they read as strong as the solid hairline. |
| `tone?` | `"neutral" \| "brand" \| "success" \| "warning" \| "danger" \| "info"` | `"neutral"` | neutral is the hairline (10% of the text color, so it works on every surface in both themes). Any other tone colors the line with its border color and the label with its text color. |
| `color?` | `string` | `""` | Any CSS color. Replaces the tone: the line is the color at 45%, the label mixes it toward the text color for contrast. Leave empty to use the tone. |
| `thickness?` | `1 \| 2` | `1` | Line thickness in px. 2 suits section breaks and dashed dividers; solid 2px lines get rounded ends. |
| `labelVariant?` | `"plain" \| "soft" \| "outline"` | `"plain"` | How the label sits in the line: plain text, a soft tinted pill (chat date dividers, "3 new messages") or an outlined pill in the line color. |
| `fade?` | `boolean` | `false` | Fades the line out toward its ends. With a label, each long side fades toward its outer end (mirrored in right-to-left layouts); the 16px stub of a start or end label stays solid. |
| `orientation?` | `"horizontal" \| "vertical"` | `"horizontal"` | Vertical stretches to the height of the flex row it sits in and falls back to 16px in a parent that is not flex, so it never disappears. A height in className (h-3.5 self-center) wins. A vertical label stacks between two line segments and wraps at 96px, so a long one never squeezes the columns beside it. |
| `labelPosition?` | `"start" \| "center" \| "end"` | `"center"` | Where the label sits. start and end keep a 16px stub of line before or after it. |
| `spacing?` | `"none" \| "sm" \| "md" \| "lg"` | `"none"` | Margin on both sides along the axis: 0, 8, 16 or 24px (above and below a horizontal line, left and right of a vertical one). |
| `inset?` | `number` | `0` | Pixels of empty space before the line (after it in right-to-left layouts), taken off its width so it never overflows. For list rows whose divider starts after the icon, like iOS settings. |
| `decorative?` | `boolean` | `true` | On by default: the line is hidden from assistive tech (role="none"). Turn it off between real sections for role="separator" with aria-orientation; a text label becomes its accessible name. |
| `classNames?` | `Partial<Record<"line" \| "label", string>>` |  | Extra classes for the inner parts: each line segment (the root itself when there is no label) and the label. |
| `className?` | `string` |  | Extra classes for the root, merged last. A short vertical rule in a text row: className="h-3.5 self-center". Any line color: className="[--separator-color:red]". |

## Examples

- **Line styles**: Solid, dashed and dotted at 1 and 2px, plus a line that fades out at both ends.
- **Chat date dividers**: The label sits at the start, in the center or at the end; start and end keep a 16px stub of line.
- **Vertical**: Between items in a meta row and between groups in a toolbar. A className sets a shorter rule.
- **An icon as the label**: A star between two sections of a listing, with fade so the break feels soft.
- **Inset list dividers**: inset={64} starts each line under the title, after the 36px icon, like iOS settings.
- **Danger zone**: A danger dashed separator marks the destructive part of a settings page. Delete asks twice.
- **Pill labels and colors**: Soft and outlined pills, a brand unread divider and a custom color at 2px.

## See also

- [Toolbar](https://wingo-ui.com/components/toolbar) ([Markdown](https://wingo-ui.com/components/toolbar.md))
- [List](https://wingo-ui.com/components/list) ([Markdown](https://wingo-ui.com/components/list.md))
- [Card](https://wingo-ui.com/components/card) ([Markdown](https://wingo-ui.com/components/card.md))
- [Button](https://wingo-ui.com/components/button) ([Markdown](https://wingo-ui.com/components/button.md))
- [Tones](https://wingo-ui.com/components/tones) ([Markdown](https://wingo-ui.com/components/tones.md))

---

Canonical: https://wingo-ui.com/components/separator
More components: https://wingo-ui.com/components · Index for agents: https://wingo-ui.com/llms.txt