Separator

Shows related items.

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
N/A
N/A

Content structure

Separator: clearly separates sections of content.

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.