When to use
- To visually and semantically group related content.
When not to use
- To create a hierarchy with larger sections of content—use a heading.
- To distinguish sections only visually, not semantically—use color.
Component status
Figma | React | iOS | Android |
|---|---|---|---|
Released | Released | Released | Released |
Content structure
Behavior
Use to group content
Separators present a visual cue to group together sections of content, but they also have semantic value. Remember that they add structure and aren’t just decorative.
Use them to show groups like related menu items and related text within a larger section.
Use only when necessary
Separators can be useful for grouping things and showing clear structures. But when they start to appear everywhere, they begin to lose their value.
Try making your designs clear with other separations, such as white space and colors.