Box

Mostly used as a simple container or as a base to build other components.

Boxed content

Edit the code below to see your changes live!

<Box backgroundColor="secondary20" border="box" borderRadius="normal" padding="medium">
  Boxed content
</Box>

<Box backgroundColor="secondary20" border="box" borderRadius="normal" padding="medium">
  Boxed content
</Box>

API

Box

Prop Name	Type	Description
`as`	`string` \| `React.ComponentType<any>`	Use a different HTML tag or a different custom component
`backgroundColor`	`Color`	Sets the background color given a color name from our palette.
`shadow`	`floating` \| `raised`	Determines the type of shadow to be applied.
`border`	`box` \| `boxError` \| `none`	Determines type of border to be applied.
`borderBottom`	`box` \| `boxError` \| `none`	Determines type of bottom border to be applied.
`borderLeft`	`box` \| `boxError` \| `none`	Determines type of left border to be applied.
`borderRight`	`box` \| `boxError` \| `none`	Determines type of right border to be applied.
`borderTop`	`box` \| `boxError` \| `none`	Determines type of top border to be applied.
`borderRadius`	`normal` \| `circle` \| `none`	Determines type of border radius to be applied.
`clearfix`	`boolean`	Adds a clearfix for floating internal elements.
`zIndex`	`sticky` \| `fixed` \| `modalBackdrop` \| `modal` \| `tooltip` \| `popover`	Determines type of z-index to be applied. Types are in order (sticky is low, popover is high).

Props ending with * are required

Inherited Props

Display Props

Margin Props

Padding Props

Examples

Box also supports multiple shadows, here is an example of how they look like:

Floating

Raised

Edit the code below to see your changes live!

<Flex justifyContent="space-around">
  <Box backgroundColor="secondary10" padding="xxLarge" shadow="floating">
    Floating
  </Box>
  <Box backgroundColor="secondary10" padding="xxLarge" shadow="raised">
    Raised
  </Box>
</Flex>

<Flex justifyContent="space-around">
  <Box backgroundColor="secondary10" padding="xxLarge" shadow="floating">
    Floating
  </Box>
  <Box backgroundColor="secondary10" padding="xxLarge" shadow="raised">
    Raised
  </Box>
</Flex>

Box is extendable, here is an example on how to create an Avatar component extending from Box with a couple of extra styles:

Edit the code below to see your changes live!

function Avatar() {
  const StyledBox = styled(Box)`
    box-sizing: content-box;
    height: ${({ theme }) => theme.spacing.large};
    width: ${({ theme }) => theme.spacing.large};
  `;

  return (
    <StyledBox backgroundColor="secondary20" border="box" borderRadius="circle" padding="medium">
      BC
    </StyledBox>
  );
}

function Avatar() {
  const StyledBox = styled(Box)`
    box-sizing: content-box;
    height: ${({ theme }) => theme.spacing.large};
    width: ${({ theme }) => theme.spacing.large};
  `;
  return (
    <StyledBox backgroundColor="secondary20" border="box" borderRadius="circle" padding="medium">
      BC
    </StyledBox>
  );
}

Beta