Components
Divider
Dividers visually separate different content and can be used vertically or horizontally.
Anatomy
The divider component contains one required element.
| Item | Name | Description | Component | Optional |
|---|
Options
The divider has an option for different use cases:
Orientation
Display a divider horizontally or vertically.
Orientation
Display a divider horizontally or vertically.
Example
Here are some examples of the divider in action:
Divider with stack
Use this approach where you want equal spacing between elements. This example shows how to use the divider inside a stack. Use flow=horizontal-stretch and wrap the divider in a stackChild to stretch it to the height of the container.
Horizontal divider with block
Use this approach where you want irregular spacing between elements. This example shows the divider as a visual separator between two block elements. Use the container styledBlock to constrain the divider's width.
Vertical divider with block
Use this approach where you want irregular spacing between elements. This example shows the vertical divider as a visual separator between two inline blocks. Use the inline divider container to constrain the height of the block.
Usage
Here’s how and when to use the divider:
Use as a semantic divider element
Use dividers when you need a semantic divider element. If you need a decorative border, consider a border on a stylePreset instead.
API
The divider has a range of props and overrides to define the experience in different use cases. You can define the divider’s appearance with a single stylePreset.
| Name | Type | Default | Description | Required |
|---|