Box

Box is the lowest-level component in Canon. It provides a consistent API for styling and layout.

API reference

Box

This is the Box component, our lowest-level component. Here are all the available properties.

Prop	Type	Default	Responsive
as	divspan	div	Yes
width	string	0	Yes
minWidth	string	0	Yes
maxWidth	string	0	Yes
height	string	0	Yes
minHeight	string	0	Yes
maxHeight	string	0	Yes
position	staticrelativeabsolutefixedsticky	static	Yes
display	noneinlineinline-blockblock	block	Yes
className	string	-	No
style	CSSProperties	-	No

Padding and margin are used to create space around your component using our predefined spacing tokens. We would recommend to use padding over margin to avoid collapsing margins but both are available.

Prop	Type	Default	Responsive
p	0.511.5234567891011121314string	-	Yes
px	0.511.5234567891011121314string	-	Yes
py	0.511.5234567891011121314string	-	Yes
pt	0.511.5234567891011121314string	-	Yes
pr	0.511.5234567891011121314string	-	Yes
pb	0.511.5234567891011121314string	-	Yes
pl	0.511.5234567891011121314string	-	Yes
m	0.511.5234567891011121314string	-	Yes
mx	0.511.5234567891011121314string	-	Yes
my	0.511.5234567891011121314string	-	Yes
mt	0.511.5234567891011121314string	-	Yes
mr	0.511.5234567891011121314string	-	Yes
mb	0.511.5234567891011121314string	-	Yes
ml	0.511.5234567891011121314string	-	Yes

Examples

Simple example

A simple example of how to use the Box component.

<Box padding="md" borderRadius="md">Hello World</Box>

Responsive

Here's a view when buttons are responsive.

<Box
  padding={{ xs: 'sm', md: 'md' }}
  borderRadius={{ xs: 'sm', md: 'md' }}>
  Hello World
</Box>