Dividers are a horizontal line that separates content within a list or section.
Core Component & Variants
Core Components |
|
|
Property Name |
Property Type |
Property Value |
Variant |
Variant |
Full Width Thin |
Full Width Thick |
|
|
Padded Thin |
|
|
Use Label |
|
|
Examples
Best Practices
- Use dividers to visually separate content and provide clear distinctions between sections or elements within a screen.
- Align dividers with the overall visual hierarchy of the app. They should follow the design principles and guidelines of either iOS or Material Design, depending on the platform you are designing for.
- Keep dividers simple and subtle. They should enhance the user interface without overpowering or distracting from the main content.
- Use dividers wisely and avoid using too many of them, as it can make the screen feel crowded and overwhelming.
- Consider the context and purpose of dividers. Use thicker dividers to indicate stronger visual separation, such as between major sections or groups of content. Thinner dividers can be used for subtle distinctions within a section or to separate smaller elements.