The Separator component (implemented using the <hr> HTML tag) is designed to visually divide sections of content or components within a layout. It provides a simple and clean way to organise information without adding additional margins or padding, making it ideal for quick content separation.
Do's
- ensure that the Separator is used to divide distinct content blocks or UI components in a way that enhances clarity and readability
Don'ts
- do not use Separators excessively, as it may clutter the design and confuse the user about the structure of the content
- avoid using the Separator for purely decorative purposes if it does not contribute to the content structure
When to Use
- use when you need to quickly add dividers between components without modifying spacing above or below
- use within paragraphs to subtly separate ideas or sections of text that are conceptually distinct
When Not to Use
- do not use to separate large blocks of content where more complex visual distinction (such as a background color) is needed