docs

Styling

Headless separator styling is intentionally compact. The primitive gives you slot and orientation hooks, and your layout decides spacing, thickness, and contextual emphasis.

Slot and owner hooks

Selector	Who owns it	Typical use
`[data-slot="separator"]`	Library	Base line color, opacity, and shared divider transitions.
`[data-orientation="horizontal"]`	Library	Horizontal height and width rules.
`[data-orientation="vertical"]`	Library	Vertical width and minimum height rules.
`.toolbar` / `.stack`	You	Context-specific spacing and divider placement in the surrounding layout.

CSS starter

[data-slot="separator"] {
  background: var(--tng-semantic-border-strong);
  display: block;
}

[data-slot="separator"][data-orientation="horizontal"] {
  block-size: 1px;
  inline-size: 100%;
}

[data-slot="separator"][data-orientation="vertical"] {
  inline-size: 1px;
  min-block-size: 1rem;
}

.toolbar [data-slot="separator"] {
  margin-inline: 0.5rem;
}

Practical guidance

Keep divider thickness on the primitive hook and container spacing on the surrounding layout.
Use lower-contrast separators for decorative grouping and stronger contrast for semantic breaks.
Avoid stretching vertical separators with arbitrary heights when the container can provide natural alignment.