Box

View on GitHub

import { Box } from '@sky-uk/ui-core';

The Box component is a special component that has no styling applied by default. It surfaces a number of the system modifiers available from the library.

System Modifiers

The Box component supports the props applied using the following system functions:

background
border
border-radius
display
box-shadow
flex-child
flex-parent (Deprecated, will be removed in future release. Please use Flex.)
grid-child
height
margin
overflow
padding
position
width

Do

TheBox component should only be used to apply re-usable patterns where making a brand new component does not make sense. A good example of this would be if you need to wrap some content in a box that has a gradient and some padding.

<Box
    $bgGradient="channels.one"
    $borderRadius={1}
    $padding={4}
>
    Hello World
</Box>

<Box
    $bgGradient="channels.one"
    $borderRadius={1}
    $padding={4}
>
    Hello World
</Box>

Don't

Don't extend the Box component

The Box component should never be extended to create a new styled component. See the "Customising Components" and "Composition" sections of the Developer Quickstart for information on how to create your own components.

// Don't do this
const MyComponent = styled(Box)`
    background-color: red;
`

// or this
<MyComponent as={Box} />

Don't use Box as a div replacement

The Box component is not a replacement for the div element, do not use it if you are not using any part of it's API.

// Don't do this
<Box>This is bad</Box>

Be sensible

Be sensible when using the Box component. This is not a hard-and-fast rule but you should be aware that the following can make code harder to traverse and also defeat the original intention of the Box component.

Using many of the props available to the Box component at once.
Nesting many instances of the Box component to create layout.

If you are finding you are doing these things and it is making your code hard traverse then consider making a new component with the styles applied directly or using the following pattern to abstract the component and give it a name that provides more context:

const Wrapper = props => (
  <Box
    $bgColor="white"
    $display="flex"
    $flexDirection="column"
    $position="absolute"
    $top={0}
    $left={0}
    $right={0}
    {...props}
  />
);