Anatomy
Note: Image is not to scale
- Divider
Options
Orientation
Dividers can be used to separate individual items in a list, or to to provide clearer visual distinction between two or more grouped elements. They can be oriented vertically or horizontally, depending on the layout in which they occur.
Color
Sometimes it's helpful to use dividers as a means of delineating sections of a page or key areas of content. In many cases, a “strong” divider placed above the content can be used to mark the start of a new section and helps distinguish the area from the surrounding layout.
Behavior
Fill Container
By default, a divider line should span the full horizontal or vertical dimension of its parent element. The actual height or width of the containing element should derive from its content, unless otherwise specified.
API Reference
| Prop | Description | Type | Default | Required |
|---|---|---|---|---|
| variant | Sets the color of the divider | enum strong | default | default | False |
| orientation | Either `vertical` or `horizontal`. Defaults to `horizontal`. | enum horizontal | vertical | ---- | False |
| decorative | Whether or not the component is purely decorative. When true, accessibility-related attributes are updated so that that the rendered element is removed from the accessibility tree. | enum boolean | ---- | False |
| asChild | enum boolean | ---- | False |