Interlock
PrimitivesTextBoxButtonFlexLinkModalData inputInputData vizList
Box Interlock box component 🔗 children ▪️ padding ▪️ margin ▪️ css ▪️ className Props 
export interface BoxProps {
  /**
   * @param children children that are passed into the box
   */
  children: React.ReactNode | ReactNode[]
  /**
   * @param  padding padding setting for the box (Optional)
   */
  padding?: 'small' | 'medium' | 'large' | 'x-large' | 'none'
  /**
   * @param  margin padding setting for the box (Optional)
   */
  margin?: 'small' | 'medium' | 'large' | 'x-large' | 'none'
  /**
   * @param CSS overrides provided in-line. (Optional)
   */
  css?: React.CSSProperties;
  /**
   * @param className css classnames
   */
  className?: string;
/**
   * @param onClick onClick handler
   */
  onClick?: MouseEventHandler<HtmlDivElement>;}
children
<>
  <Box css={{ backgroundColor: 'gray' }}>
    <Text text="Children example usage usage" />
  </Box>
</>
Rendered output
Children example usage usage
padding
<>
  <Box padding="small" css={{ backgroundColor: 'gray' }}>
    <Text text="Small padding usage" />
  </Box>
  <hr />
  <Box padding="medium" css={{ backgroundColor: 'gray' }}>
    <Text text="Medium padding usage" />
  </Box>
  <hr />
  <Box padding="large" css={{ backgroundColor: 'gray' }}>
    <Text text="Large padding usage" />
  </Box>
  <hr />
  <Box padding="x-large" css={{ backgroundColor: 'gray' }}>
    <Text text="X-lage padding usage" />
  </Box>
</>
Rendered output
Small padding usage
Medium padding usage
Large padding usage
X-lage padding usage
margin
<>
  <Box margin="small" css={{ backgroundColor: 'gray' }}>
    <Text text="Small margin usage" />
  </Box>
  <hr />
  <Box margin="medium" css={{ backgroundColor: 'gray' }}>
    <Text text="Small margin usage" />
  </Box>
  <hr />
  <Box margin="large" css={{ backgroundColor: 'gray' }}>
    <Text text="Small margin usage" />
  </Box>
  <hr />
  <Box margin="x-large" css={{ backgroundColor: 'gray' }}>
    <Text text="Small margin usage" />
  </Box>
</>
Rendered output
Small margin usage
Small margin usage
Small margin usage
Small margin usage
css
<>
  <Box css={{ backgroundColor: 'red' }}>
    <Text text="Css example usage" />
  </Box>
</>
Rendered output
CSS example usage
className
<>
  <Box className="my-classname">
    <Text text="Class name example usage" />
  </Box>
</>
Rendered output
Children example usage usage
Github