Separator
A thin line between groups of content or of buttons. Use it when spacing alone doesn't make the groups clear.
Installation
Set up Camaleo once (Installation), then import what you need. The skin you load styles it.
import { Separator } from "@camaleo/react";Anatomy
One <div> with role="separator": 1px tall when horizontal, 1px wide when vertical. It has a data-slot you can target from CSS.
Examples
Every example is a real file you can copy. They all wear the skin, mode and brand from the bar above.
Between stacked blocks
The line takes the full width of its parent. Space it with the parent's gap, so the gap above and below stays the same.
Between items in a row
With orientation="vertical" the line takes the height of the row. Use it for short facts that sit side by side, like file count and size.
Between groups of buttons
Split actions that do different kinds of things, like replying and deleting. For a real toolbar with arrow keys, use Toolbar and its own separator.
With a label, like "or"
Put the word between two separators with aria-hidden. Screen readers read "or" once, instead of "separator, or, separator".
How Vila Nova Design cut invoice errors by half
Only decoration
This short accent line adds no structure, so it gets aria-hidden and screen readers skip it. Keep the separator role for lines that really split content.
Changing with the layout
Click Side by side. When the blocks move into a row, switch the orientation too, so the line and aria-orientation follow the layout.
In context
Separators split menus, lists and panels into groups people can scan. These are whole pieces of UI you can copy, in the skin you picked.
Guidelines
A separator says "something new starts here". Use it where the topic changes.
Use margin or gap for space. Extra lines look like a bug and screen readers announce each one.
Put it straight in a flex row. It stretches with the items, and you don't need to set a height.
Some screen readers say "vertical bar" between the items. Use a vertical separator instead.
Props
Separator also takes the attributes of a <div>, like aria-hidden and style.
Styling hooks
Restyle it without forking: target the attributes, or set the tokens on a parent, a skin or the separator itself.
Attributes
Tokens it reads
Color
Accessibility
- It renders role="separator" with aria-orientation, so screen readers can announce the break between groups.
- Pass aria-hidden when the line is only decoration, or when a word like "or" already says what it means.
- The line is a hint, not the only signal. Groups should also make sense from their headings or labels.
- Inside Menu, Select or Toolbar, use their own separator part: it carries the right role for that widget.