> ## Documentation Index
> Fetch the complete documentation index at: https://docs.cognite.com/llms.txt
> Use this file to discover all available pages before exploring further.

> ## Agent Instructions
> Cognite Data Fusion (CDF) is an industrial DataOps platform. Prefer English docs unless the user asks for another locale.
> Follow /_llms/ index links recursively until you reach page URLs ending in .md. Fetch those Markdown twins instead of HTML.
> For REST APIs, default to calendar version 20230101 (stable). Use 20230101-beta or 20230101-alpha only if the user is on a preview API. Cite paths under /api-reference/concepts/<version>/ and the Cdf-Version header. Prefer the Python SDK (cognite-sdk) unless the user is in JavaScript/TypeScript.
> Start here by task: platform overview /cdf/index.md; data modeling /cdf/dm/index.md; data integration /cdf/integration/index.md; access /cdf/access/index.md; CDF Toolkit /cdf/deploy/cdf_toolkit/index.md; REST quickstart /dev/quickstart.md; Python SDK /dev/sdks/python/index.md; Atlas AI /cdf/atlas_ai/concepts/index.md; Flows apps /cdf/flows/index.md; Aura UI /cdf/aura/index.md; MCP and IDE setup /dev/guides/ide_ai_integration.md.
> For implementation work, also load /skill.md.

# Separator

> A Separator is a one pixel thick UI element used to create visual separation between sections or content. It helps improve readability and organization without overwhelming the layout. They can be horizontal or vertical in their orientation.

<Badge color="blue">v1.0.0</Badge> | [View in Storybook](https://master--695bb4b1b8041ae09768950a.chromatic.com/?path=/docs/primitives-separator--docs)

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-separator--default" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-separator--default&viewMode=story&globals=theme:light" title="Separator default story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

## When to use

* When used appropriately, Separators can provide visual relief and help the user identify related areas making it easier to focus on the task at hand.

## When to use something else

* Sparse layouts: prefer whitespace over a line.
* When grouping needs semantics or stronger hierarchy: use headings, [Card](/cdf/aura/primitives/card), or background regions—not only a [Separator](/cdf/aura/primitives/separator).

## Dos and don'ts

* **Do** use 16px long vertical Separators when needing to separate button or horizontally laid out form elements.
* **Don't** use Separators between every element. Instead, group related content together and use the Separator to separate categories or dissimilar content.
* **Don't** overuse Separators as they can clutter the interface and reduce readability, making it hard to understand related and unrelated content.
* **Don't** use Separators when white space can achieve the same effect.
* **Don't** make Separators bold or a different color. They should be subtle.

## Placement & alignment

* Full-bleed Separators are mostly used in layout elements, forms, lists, and expandable primitives. Common usage is within side panels.
* Separators used in side panel extend completely to both left and right edges. This prevents too much clutter by competing with the outline input form styling.
* Inset Separators separate related content, similar to sub-bullets in a bullet list and do not extend edge to edge, but instead appear to float within their container.

## Behavior

* Non-interactive line; conveys visual structure only. Do not rely on it for accessible grouping—use headings and landmarks where needed.

## Often used with

[Toolbar](/cdf/aura/primitives/toolbar), [Card](/cdf/aura/primitives/card) header/footer, [Accordion](/cdf/aura/primitives/accordion) stacks, dense form sections—always with semantic headings where grouping matters for accessibility.

## Visual examples

The examples below are interactive and follow the doc site's theming: light mode when the docs site is in light mode, and dark mode when you switch the docs site to dark mode.

### Vertical

Use a vertical separator to divide inline controls in a horizontal row—for example, between toolbar buttons or form fields laid out side by side.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-separator--vertical" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-separator--vertical&viewMode=story&globals=theme:light" title="Separator vertical story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

### All orientations

Compare horizontal and vertical separators to choose the orientation that best fits the layout—horizontal for stacked sections, vertical for inline groups.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-separator--all-orientations" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-separator--all-orientations&viewMode=story&globals=theme:light" title="Separator all orientations story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

### In navigation

Use separators in navigation to divide related link groups without adding visual weight—for example, between primary and secondary menu items.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-separator--in-navigation" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-separator--in-navigation&viewMode=story&globals=theme:light" title="Separator in navigation story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

### In card

Place a separator between card header, body, and footer regions to create clear visual hierarchy without relying on heavy borders or background changes.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-separator--in-card" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-separator--in-card&viewMode=story&globals=theme:light" title="Separator in card story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

### With text

Use a separator with centered text to label a break between sections—for example, "or" between sign-in options or a category name between list groups.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-separator--with-text" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-separator--with-text&viewMode=story&globals=theme:light" title="Separator with text story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

### In list

Use inset separators between list items to separate rows without full-bleed lines, keeping dense lists readable and visually organized.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-separator--in-list" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-separator--in-list&viewMode=story&globals=theme:light" title="Separator in list story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

### Custom style

Adjust separator styling sparingly to match a specific layout context, but keep lines subtle so they support structure without competing with content.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-separator--custom-style" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-separator--custom-style&viewMode=story&globals=theme:light" title="Separator custom style story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

### Accessibility

Use semantic headings and landmarks alongside separators for accessible grouping—separators alone do not convey structure to assistive technologies.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-separator--accessibility" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-separator--accessibility&viewMode=story&globals=theme:light" title="Separator accessibility story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>