Box

Box is a primitive component that acts as a generic container and provides managed access to design tokens.

Usage

Box is the foundation for layout and spacing in Teardrop. Use it to create containers with consistent spacing and styling.

import { Box } from '@hardwater/teardrop';

<Box padding="medium" backgroundColor="neutral.100">
  Content here
</Box>

Padding

All Sides

<Box padding="medium">Content</Box>

Specific Sides

<Box paddingX="large" paddingY="small">Content</Box>
<Box paddingTop="medium">Content</Box>
<Box paddingRight="small">Content</Box>
<Box paddingBottom="large">Content</Box>
<Box paddingLeft="medium">Content</Box>

Margin

<Box margin="large">Content</Box>
<Box marginX="medium" marginY="small">Content</Box>
<Box marginTop="large">Content</Box>

Background Color

<Box backgroundColor="neutral.100">Light background</Box>
<Box backgroundColor="primary.500">Primary background</Box>
<Box backgroundColor="semantic.success.100">Success background</Box>

Border

<Box border="1px solid" borderColor="neutral.200">
  Bordered box
</Box>

<Box borderRadius="medium" border="1px solid" borderColor="neutral.200">
  Rounded box
</Box>

Width and Height

<Box width="100%">Full width</Box>
<Box width={300}>Fixed width</Box>
<Box minHeight={200}>Minimum height</Box>

Display

<Box display="flex">Flex container</Box>
<Box display="grid">Grid container</Box>
<Box display="none">Hidden</Box>

API

Props

Prop	Type	Default	Description
padding	SpacingToken	-	Padding on all sides
paddingX	SpacingToken	-	Horizontal padding
paddingY	SpacingToken	-	Vertical padding
paddingTop	SpacingToken	-	Top padding
paddingRight	SpacingToken	-	Right padding
paddingBottom	SpacingToken	-	Bottom padding
paddingLeft	SpacingToken	-	Left padding
margin	SpacingToken	-	Margin on all sides
marginX	SpacingToken	-	Horizontal margin
marginY	SpacingToken	-	Vertical margin
marginTop	SpacingToken	-	Top margin
marginRight	SpacingToken	-	Right margin
marginBottom	SpacingToken	-	Bottom margin
marginLeft	SpacingToken	-	Left margin
backgroundColor	ColorToken	-	Background color
border	string	-	Border style
borderColor	ColorToken	-	Border color
borderRadius	BorderRadiusToken	-	Border radius
width	string | number	-	Width
height	string | number	-	Height
minWidth	string | number	-	Minimum width
minHeight	string | number	-	Minimum height
maxWidth	string | number	-	Maximum width
maxHeight	string | number	-	Maximum height
display	string	-	Display property
as	string | Component	'div'	Element or component to render as

Examples

Card

<Box
  padding="large"
  backgroundColor="white"
  borderRadius="medium"
  border="1px solid"
  borderColor="neutral.200"
>
  <Heading>Card Title</Heading>
  <Text>Card content</Text>
</Box>

Container

<Box
  maxWidth={1200}
  marginX="auto"
  paddingX="large"
>
  Page content
</Box>

Section

<Box
  paddingY="xlarge"
  backgroundColor="neutral.50"
>
  Section content
</Box>

Best Practices

1. Use for layout - Box is ideal for creating layout containers
2. Use tokens - Always use spacing and color tokens
3. Semantic HTML - Use as prop for semantic HTML elements
4. Composition - Combine Box with Stack and Inline for complex layouts

Related

• Stack - Vertical layout
• Inline - Horizontal layout
• Spacing Tokens
• Color Tokens