> ## 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.

# 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.

## Separator

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

### 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](/aura-design-system/primitives/card), or background regions—not only a [Separator](/aura-design-system/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](/aura-design-system/primitives/toolbar), [Card](/aura-design-system/primitives/card) header/footer, [Accordion](/aura-design-system/primitives/accordion) stacks, dense form sections—always with semantic headings where grouping matters for accessibility.