Import
import { Divider } from 'styled-system/jsx'Usage
Used to visually separate content.
Loading example...
Appearance
To change the appearance of the divider, use the borderStyle prop.
Loading example...
Orientation
Use the orientation prop to change the orientation of the divider.
Loading example...
Thickness
Use the thickness prop to change the thickness of the divider.
Loading example...
Color
Use the color prop to change the color of the divider.
Loading example...
Label
Create visual labels by combining a Divider with other layout components.
Loading example...
Props
The Divider component accepts the following utility props in addition to style and factory props:
| Prop | Type | Description |
|---|---|---|
orientation | horizontal,vertical | The orientation of the divider. Defaults to "horizontal". |
thickness | string | The thickness of the divider. Defaults to "1px". |
color | string | The color of the divider. Defaults to "gray.200". |