Separator

Shows related items.

  • To visually and semantically group related content.
  • To create a hierarchy with larger sections of content—use a heading.
  • To distinguish sections only visually, not semantically—use color.
FigmaReactiOSAndroidDocumentation
Released
Released
n/a
n/a
Released

Separator: clearly separates sections of 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.

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.