Box Component
The Box component is a primitive component that can be used to create a box with padding and other style properties.
Props
The Box component accepts the following props:
| Prop | Description | Type |
|---|---|---|
children | The content of the Box component. | Node |
radius | A string that sets the border radius of the Box. | String |
bg | A string that sets the background color of the Box. | String |
backgroundColor | A string that sets the background color of the Box. | String |
w | A string that sets the width of the Box. | String |
h | A string that sets the height of the Box. | String |
width | A string that sets the width of the Box. | String |
height | A string that sets the height of the Box. | String |
p | A string that sets the padding of the Box. | String |
pt | A string that sets the top padding of the Box. | String |
pr | A string that sets the right padding of the Box. | String |
pb | A string that sets the bottom padding of the Box. | String |
pl | A string that sets the left padding of the Box. | String |
px | A string that sets the horizontal padding of the Box. | String |
py | A string that sets the vertical padding of the Box. | String |
padding | A string that sets the padding of the Box. | String |
m | A string that sets the margin of the Box. | String |
mt | A string that sets the top margin of the Box. | String |
mb | A string that sets the bottom margin of the Box. | String |
mr | A string that sets the right margin of the Box. | String |
ml | A string that sets the left margin of the Box. | String |
mx | A string that sets the horizontal margin of the Box. | String |
my | A string that sets the vertical margin of the Box. | String |
margin | A string that sets the margin of the Box. | String |
size | A string that sets the size of the Box. It can be 'sm' or 'lg'. | String |
Usage
Hello, world!
<Box
bg="red-600"
size="sm"
>
Hello, world!
</Box>