Box

Use the Box component as a layout primitive to add margin, padding, and colors to content.

Default

Use the Box component as a layout primitive to add margin, padding, and colors to content.

import { Box } from 'legion-ui';

Legion have only one variant of box basic box

Box

<Box p={4} color="white" bg="primary500">
  Box
</Box>

property	propType	description
as?	string	HTML tag to be rendered as. Default value: div
bg?	string	Background color of rendered box
color?	string	Text color
m?	string \| number	Margin on all sides
mt?	string \| number	Margin on top
mr?	string \| number	Margin on right
mb?	string \| number	Margin on bottom
ml?	string \| number	Margin on left
mx?	string \| number	Margin on left and right
my?	string \| number	Margin on top and bottom
opacity?	float	Opacity
p?	string \| number	Padding on all sides
pt?	string \| number	Padding on top
pr?	string \| number	Padding on right
pb?	string \| number	Padding on bottom
pl?	string \| number	Padding on left
px?	string \| number	Padding on left and right
py?	string \| number	Padding on top and bottom
style?	object	The `style` prop lets you style elements inline

Please let us know to make it better