Box
Box is the default layout component that implements sensitive flexbox defaults similar to React Native. It supports a couple of responsive props which means that it accepts either a single value or an array of values per breakpoint.
API Reference
Name | Type | Default | Description |
|---|---|---|---|
alignContent | Responsive<string> | ||
alignItems | Responsive<'start' | 'end' | 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline'> | stretch | |
alignSelf | Responsive<'flex-start' | 'flex-end' | 'center' | 'stretch' | 'start' | 'end' | 'unset'> | ||
as | React.ElementType | ||
backgroundColor | Responsive<string> | bg | |
basis | Responsive<number | string> | auto | |
bg | Responsive<string> | ||
children | React.ReactNode | ||
className | string | ||
containerElement | React.ElementType | div | |
direction | Responsive<'row' | 'column' | 'row-reverse' | 'column-reverse'> | column | |
display | Responsive<'none' | 'flex' | 'grid' | 'block' | 'inline' | 'inline-block' | 'contents' | 'list' | 'list-item'> | flex | |
extend | unknown | ||
flex | number | ||
gap | Responsive<number | string> | ||
grow | Responsive<number> | 0 | |
height | Responsive<number | string> | ||
justifyContent | Responsive<'flex-start' | 'flex-end' | 'center' | 'stretch' | 'space-between' | 'space-around' | 'space-evenly'> | ||
margin | Responsive<number | string> | ||
marginBottom | Responsive<number | string> | ||
marginHorizontal | Responsive<number | string> | ||
marginLeft | Responsive<number | string> | ||
marginRight | Responsive<number | string> | ||
marginTop | Responsive<number | string> | ||
marginVertical | Responsive<number | string> | ||
maxHeight | Responsive<number | string> | ||
maxWidth | Responsive<number | string> | ||
minHeight | Responsive<number | string> | ||
minWidth | Responsive<number | string> | ||
order | Responsive<number> | ||
padding | Responsive<number | string> | ||
paddingBottom | Responsive<number | string> | ||
paddingHorizontal | Responsive<number | string> | ||
paddingLeft | Responsive<number | string> | ||
paddingRight | Responsive<number | string> | ||
paddingTop | Responsive<number | string> | ||
paddingVertical | Responsive<number | string> | ||
shrink | Responsive<number> | 0 | |
space | Responsive<number | string> | @deprecated Use | |
spaceType | 'container' | 'spacer' | spacer | |
style | React.CSSProperties | ||
width | Responsive<number | string> | ||
wrap | Responsive<string> | nowrap |
Baseline Grid
Box accepts a couple of properties that adhere to the baseline grid of 4 pixel.
That means the passed value will be multiplied by 4.
It affects the following props:
- padding
- paddingLeft
- paddingRight
- paddingTop
- paddingBottom
- paddingVertical
- paddingHorizontal
- margin
- marginLeft
- marginRight
- marginTop
- marginBottom
- marginVertical
- marginHorizontal
- gap
- space
spacegap