Example
Props
Orientation
The axis the Divider should align with, defaults to “horizontal”.
Horizontal
Content above
Content below
Content below
Vertical
Content beforeContent after
Size
How thick the Divider should be, defaults to “regular”.
Regular divider
Medium divider
Large divider
Medium divider
Large divider
Accessibility
Horizontal separators can be built with the HTML <hr> element. However, there is no HTML element for a vertical separator. Divider implements accessible separators:
- Support for horizontal and vertical orientation with the
- Support for HTML
<hr>element or a custom element type.
Learn more about this WAI-ARIA pattern.
Patterns
The Divider is a slot component. Slots are a mechanism for managing props when composing components together.
For instance, when used in the NavList it yields an <li> element to maintain semantic markup.