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
v1.0.0 | View in StorybookWhen 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, or background regions—not only a 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.