The Main component allowing you to define an entire layout of the application. It is one of the most powerful tools in the Design System. Thanks to multiple BoxProps it can serve as the main wrapper for your content or as the layout building block.
Usage
import { Box } from '@admin-bro/design-system'
Props
Apart from the props extended by the @styled-system:
it introduced 3 new props: flex, variant, animate. See BoxProps for more details.
Flex
One of the most used cases is to use Box as a flex container. Let me give you an example of how
to do this with flex prop.
Other examples
- Simple White/Gray wrapper
- Positioning buttons
Type Definitions
# BoxProps
Prop Types of a Box component. Apart from those defined below it extends all
Usage
import { BoxProps } from '@admin-bro/design-system'
Properties:
| Name | Type | Attributes | Description |
|---|---|---|---|
... |
string |
<optional> |
Other props from SpaceProps, ColorProps, LayoutProps, FlexboxProps, PositionProps and BorderProps. |
flex |
FlexboxFlexProp |
<optional> |
If box should be rendered as flex. You can pass boolean or FlexboxProps['flex'] |
variant |
'grey' | 'white' | 'card' |
<optional> |
Box variants |
animate |
boolean |
<optional> |
If set to true it makes css changes as 500ms transitions |
className |
string |
<optional> |
Optional class name passed down to the wrapper |
