Divider Component
The Divider component is a styled horizontal rule (<hr>) element that can be used to create a visual division in your application.
Props
The Divider component accepts the following props:
| Prop | Description | Type |
|---|---|---|
color | A string that sets the color of the Divider. | String |
size | A string that sets the size of the Divider. | String |
style | A string that sets the style of the Divider. | String |
width | A string that sets the width of the Divider. | String |
bg | A string that sets the background color of the Divider. | String |
backgroundColor | A string that sets the background color of the Divider. | String |
w | A string that sets the width of the Divider. | String |
h | A string that sets the height of the Divider. | String |
p | A string that sets the padding of the Divider. | String |
pt | A string that sets the top padding of the Divider. | String |
pr | A string that sets the right padding of the Divider. | String |
pb | A string that sets the bottom padding of the Divider. | String |
pl | A string that sets the left padding of the Divider. | String |
px | A string that sets the horizontal padding of the Divider. | String |
py | A string that sets the vertical padding of the Divider. | String |
padding | A string that sets the padding of the Divider. | String |
m | A string that sets the margin of the Divider. | String |
mt | A string that sets the top margin of the Divider. | String |
mb | A string that sets the bottom margin of the Divider. | String |
mr | A string that sets the right margin of the Divider. | String |
ml | A string that sets the left margin of the Divider. | String |
mx | A string that sets the horizontal margin of the Divider. | String |
my | A string that sets the vertical margin of the Divider. | String |
margin | A string that sets the margin of the Divider. | String |
Examples
<Divider
color="red-500"
size="8px"
style="dashed"
width="100%"
/>Default
Vertical
To make a vertical divider you need to wrap it in a flex element and as long as there is height to the flex element it will create a vertical divider.
This is the code for the above example
<Flex direction="row">
<Box h="24"> </Box>
<Divider />
<Box h="24"> </Box>
</Flex>