<.box width="64px" height="64px"><.decoration_box height="64px" width="64px" /></.box>API Reference
This component is based on the div element and supports common margin props.
Only the display prop values are unique to the Box component among layout primitives.
| Prop | Type | Default | Description |
|---|---|---|---|
as
|
string
|
"div"
|
The element to render. |
bottom
|
string
|
—
|
CSS bottom property. Accepts scale values, CSS strings, responsive. |
class
|
string
|
""
|
Additional CSS classes to add to the element. |
display
|
string
|
"block"
|
|
flex_basis
|
string
|
—
|
CSS flex-basis property. Responsive supported. |
flex_grow
|
string
|
—
|
CSS flex-grow property. Responsive supported. |
flex_shrink
|
string
|
—
|
CSS flex-shrink property. Responsive supported. |
grid_area
|
string
|
—
|
CSS grid-area property. Responsive supported. |
grid_column
|
string
|
—
|
CSS grid-column property. Responsive supported. |
grid_column_end
|
string
|
—
|
CSS grid-column-end property. Responsive supported. |
grid_column_start
|
string
|
—
|
CSS grid-column-start property. Responsive supported. |
grid_row
|
string
|
—
|
CSS grid-row property. Responsive supported. |
grid_row_end
|
string
|
—
|
CSS grid-row-end property. Responsive supported. |
grid_row_start
|
string
|
—
|
CSS grid-row-start property. Responsive supported. |
height
|
any
|
—
|
Height utility class string or map. `100px` or `%{xs: '100px', sm: '200px'}` |
inset
|
string
|
—
|
CSS inset property. Accepts scale values, CSS strings, responsive. |
left
|
string
|
—
|
CSS left property. Accepts scale values, CSS strings, responsive. |
m
|
any
|
—
|
Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}` |
max_height
|
any
|
—
|
Max height utility class string or map. `100px` or `%{xs: '100px', sm: '200px'}` |
max_width
|
any
|
—
|
Max width utility class string or map. `100px` or `%{xs: '100px', sm: '200px'}` |
mb
|
any
|
—
|
Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}` |
min_height
|
any
|
—
|
Min height utility class string or map. `100px` or `%{xs: '100px', sm: '200px'}` |
min_width
|
any
|
—
|
Min width utility class string or map. `100px` or `%{xs: '100px', sm: '200px'}` |
ml
|
any
|
—
|
Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}` |
mr
|
any
|
—
|
Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}` |
mt
|
any
|
—
|
Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}` |
mx
|
any
|
—
|
Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}` |
my
|
any
|
—
|
Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}` |
overflow
|
string
|
—
|
CSS overflow property. Responsive supported. |
overflow_x
|
string
|
—
|
CSS overflow-x property. Responsive supported. |
overflow_y
|
string
|
—
|
CSS overflow-y property. Responsive supported. |
p
|
any
|
—
|
Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}` |
pb
|
any
|
—
|
Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}` |
pl
|
any
|
—
|
Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}` |
position
|
string
|
—
|
CSS position property. Responsive supported. |
pr
|
any
|
—
|
Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}` |
pt
|
any
|
—
|
Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}` |
px
|
any
|
—
|
Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}` |
py
|
any
|
—
|
Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}` |
right
|
string
|
—
|
CSS right property. Accepts scale values, CSS strings, responsive. |
style
|
string
|
""
|
|
top
|
string
|
—
|
CSS top property. Accepts scale values, CSS strings, responsive. |
width
|
any
|
—
|
Width utility class string or map. `100px` or `%{xs: '100px', sm: '200px'}` |
as
The element to render.
Type
string
Default
"div"
bottom
CSS bottom property. Accepts scale values, CSS strings, responsive.
Type
string
Default
—
class
Additional CSS classes to add to the element.
Type
string
Default
""
display
Type
string
Default
"block"
flex_basis
CSS flex-basis property. Responsive supported.
Type
string
Default
—
flex_grow
CSS flex-grow property. Responsive supported.
Type
string
Default
—
flex_shrink
CSS flex-shrink property. Responsive supported.
Type
string
Default
—
grid_area
CSS grid-area property. Responsive supported.
Type
string
Default
—
grid_column
CSS grid-column property. Responsive supported.
Type
string
Default
—
grid_column_end
CSS grid-column-end property. Responsive supported.
Type
string
Default
—
grid_column_start
CSS grid-column-start property. Responsive supported.
Type
string
Default
—
grid_row
CSS grid-row property. Responsive supported.
Type
string
Default
—
grid_row_end
CSS grid-row-end property. Responsive supported.
Type
string
Default
—
grid_row_start
CSS grid-row-start property. Responsive supported.
Type
string
Default
—
height
Height utility class string or map. `100px` or `%{xs: '100px', sm: '200px'}`
Type
any
Default
—
inset
CSS inset property. Accepts scale values, CSS strings, responsive.
Type
string
Default
—
left
CSS left property. Accepts scale values, CSS strings, responsive.
Type
string
Default
—
m
Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type
any
Default
—
max_height
Max height utility class string or map. `100px` or `%{xs: '100px', sm: '200px'}`
Type
any
Default
—
max_width
Max width utility class string or map. `100px` or `%{xs: '100px', sm: '200px'}`
Type
any
Default
—
mb
Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type
any
Default
—
min_height
Min height utility class string or map. `100px` or `%{xs: '100px', sm: '200px'}`
Type
any
Default
—
min_width
Min width utility class string or map. `100px` or `%{xs: '100px', sm: '200px'}`
Type
any
Default
—
ml
Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type
any
Default
—
mr
Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type
any
Default
—
mt
Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type
any
Default
—
mx
Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type
any
Default
—
my
Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type
any
Default
—
overflow
CSS overflow property. Responsive supported.
Type
string
Default
—
overflow_x
CSS overflow-x property. Responsive supported.
Type
string
Default
—
overflow_y
CSS overflow-y property. Responsive supported.
Type
string
Default
—
p
Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type
any
Default
—
pb
Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type
any
Default
—
pl
Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type
any
Default
—
position
CSS position property. Responsive supported.
Type
string
Default
—
pr
Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type
any
Default
—
pt
Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type
any
Default
—
px
Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type
any
Default
—
py
Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type
any
Default
—
right
CSS right property. Accepts scale values, CSS strings, responsive.
Type
string
Default
—
style
Type
string
Default
""
top
CSS top property. Accepts scale values, CSS strings, responsive.
Type
string
Default
—
width
Width utility class string or map. `100px` or `%{xs: '100px', sm: '200px'}`
Type
any
Default
—
Layout sizing, padding, position, overflow, and grid/flex item props are shared with Flex, Grid, Container, and Section.