💠 Separator

Visually or semantically separates content.

Usage

The Separator component is used to create a clear visual or semantic division between sections of content.

Separators help organize content and group related items together, making the interface easier to navigate and understand.

When to use

• Grouping elements: Use Separators to define groups within lists or layouts, such as between navigation items, form inputs, or within dropdown menus.
• Enhancing readability: Employ Separators to break up long stretches of content, like in articles, forms, or sidebars, to enhance readability and prevent visual fatigue.
• Structural clarity: Utilize Separators to clarify the structure of the layout, especially in complex interfaces with multiple nested sections or levels of hierarchy.
• Content hierarchy: Separators can help establish a content hierarchy by marking the beginning and end of different sections, making it easier for users to scan and find information.

Avoid using Separators to decorate the interface or add visual flair; their primary purpose is to organize and structure content. Don't rely on Separators to create space between elements; instead, use proper padding and margin for that purpose. Additionally, excessive use of Separators can lead to a cluttered and visually overwhelming interface, so use them judiciously.

Examples

Horizontal

Vertical

Useful links

Here you go! Here are all the resources you might need if you are a designer, a developer or a content manager:

Accessibility

Adheres to the separator role requirements (opens in a new tab).