+ The Divider component renders a thin line that separates content within lists, layouts, and sections, providing a subtle way to reinforce visual hierarchy.
+
+ The Divider component is a thin, subtle line for separating content in your interface. +
+ + ++ By default, the Divider renders as a full-width horizontal line. +
+
+ The Divider supports three variants: fullWidth (default), inset, and middle.
+
+ Use orientation="vertical" to render a vertical divider. The flexItem prop ensures proper height in flex containers.
+
+ You can render text or other elements within the divider using children. Use textAlign to control alignment.
+
+ When using dividers in lists, set component="li" to ensure valid HTML structure.
+
+ Use dividers to separate distinct sections in a layout, combined with proper spacing. +
+
+ Use vertical dividers with the middle variant to group related actions in toolbars.
+
+ The Divider component renders a thin line that separates content within lists, layouts, and sections, providing a subtle way to reinforce visual hierarchy and improve scannability.
+
+ Dividers work best when separating distinct groups of content in lists, menus, or sections. They help users scan and understand the structure of complex interfaces. +
++ Avoid overusing dividers. Too many lines can create visual clutter. Consider using whitespace, different background colors, or typography to create separation instead. +
+ +
+ Use vertical dividers to separate groups of actions in toolbars or icon groups. The flexItem prop ensures proper height alignment.
+
+ By default, Divider renders as an <hr> element with an implicit ARIA role of separator. Screen readers will announce it as "Horizontal Splitter" (or vertical when using orientation="vertical").
+
+ If the divider is purely decorative, add aria-hidden="true" to prevent screen readers from announcing it.
+
+ When wrapping content like text or chips, set component="div" and role="presentation" to maintain proper semantics.
+
+ When using dividers in lists, set component="li" to ensure valid HTML structure.
+
+ Use dividers with text to create subtle section headers: +
++ Consider how dividers appear on different screen sizes. Vertical dividers in horizontal layouts may need to switch to horizontal dividers on smaller screens. +
+ + +variant="middle" or variant="inset" to reduce visual weight
+ The Divider component renders a thin line that separates content within lists, layouts, and sections, providing a subtle way to reinforce visual hierarchy and improve scannability.
+
+ Dividers help organize content and improve scannability by separating groups of related elements. Use them sparingly to maintain visual clarity without creating unnecessary noise. +
+ +
+ The Divider component supports three variants: fullWidth (default), inset, and middle.
+
+ The default variant spans the full width of its container. +
+
+ The inset variant adds left padding, useful when aligning with indented list items.
+
+ The middle variant shortens the divider on both sides.
+
+ Use the orientation prop to render vertical dividers. Vertical dividers are useful for separating items in toolbars or button groups.
+
+ You can center an element between divider lines using children. Use the textAlign prop to align the content.
+
+ When using the Divider to separate items in a list, render it as an <li> using the component prop.
+