A layout component for controlling width, margin, padding, colour and shadows.
import { Box } from "@nulogy/components";
<Box bg="darkBlue" color="white" p="x3">Box</Box>
Width can be set using a fraction or string.
<Box width={1/2}>Half</Box>
<Box width="200px">200px</Box>
Color can be set using a reference to the theme.colors object.
<Box color="blue">blue</Box>
Color can be set using a reference to the theme.colors object.
<Box bg="lightBlue">lightBlue</Box>
There are three shadows that can be set using a reference to the theme.shadows object.
<Box p="x3" boxShadow="large">large shadow</Box>
All Box props can be used responsively by using an object that defines small, medium and/or large, based on the theme.breakpoints object
<Box color={{ extraSmall: "red", small: "blue", medium: "green"}}>
Green text on large screens, blue on medium and red on small.
</Box>
Name | Type | Default | Description |
---|---|---|---|
order | number | Sets the order to be used with Flex component | |
className | String | undefined | className passed to the box component. |
The Box component has access to space, colour, layout, border, boxShadow, textAlign, and position style props. See the style prop documentation for a full list of available props.