Guidelines
When to use
- Segmenting content: Use dividers to separate related content within a container when spacing alone isn’t enough.
- Grouping sections: Use when distinguishing different sections of a page or list.
- Providing visual hierarchy: When content lacks a natural separation, a divider can guide users through the structure.
- Displaying choices: Use dividers with text (e.g., "or") to separate action options, like multiple buttons or alternative options.
Use dividers to organize content inside a panel, improving readability without clustering the layout.
Dividers can be helpful to separate items within a list, improving clarity and organization.
When not to use
- Overusing dividers: If spacing alone can define the sections, avoid adding unnecessary lines.
- For decorative purposes: Dividers should serve a structural role and not be used purely for aesthetics.
- Replacing headings or labels: A divider may not be needed if a label or title provides better clarity.
Orientation
Choose the divider that best fits your content.
- Horizontal dividers work best for separating stacked content, such as lists or sections.
- Vertical dividers are ideal for organizing inline elements, like items in a row, or splitting the page layout into columns.
Border Style
There are two border style options: solid and dotted. We recommend using the solid variant in most cases and the dotted version for a less strict division between content.
Text
The divider can include a concise label to provide additional context, such as identifying Page Sections or categories. It can also be used to create a clearer distinction between choices, like separating alternative options or actions.
Sizes
When selecting a Divider, prioritize the Default size. Use the Large variant with caution, only when a more noticeable separation of content or sections is needed and the Default size or spacing is insufficient, such as in table grouping options.
