No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

The component failed to render properly, likely due to a configuration issue in Storybook. Here are some common causes and how you can address them:

  1. Missing Context/Providers: You can use decorators to supply specific contexts or providers, which are sometimes necessary for components to render correctly. For detailed instructions on using decorators, please visit the Decorators documentation.
  2. Misconfigured Webpack or Vite: Verify that Storybook picks up all necessary settings for loaders, plugins, and other relevant parameters. You can find step-by-step guides for configuring Webpack or Vite with Storybook.
  3. Missing Environment Variables: Your Storybook may require specific environment variables to function as intended. You can set up custom environment variables as outlined in the Environment Variables documentation.

Box

The Box Component is the most basic layout component. It can be used to build more complex components and layouts with properties that use our design tokens instead of using CSS.

Usage

When to use

Use it whenever you would use custom CSS.

When not to use

If you need layout styles, use the Stack or Grid components instead.

How to add a prop to Box

  1. Make sure you absolutely need this prop. If in doubt, ask someone from the design system team.
  2. Add the prop to the BoxProps interface in Box.tsx.
    • Make sure it is strictly typed, making use of design tokens if needed. Instead of [propName]: number, use [propName]: ThemeSpacingTokens;
    • If it is a CSS prop, you should make it responsive. To do so, instead of defining it as [propName]: ThemeSpacingTokens, define it as [propName]: ResponsiveProp<ThemeSpacingTokens>.
  3. Add it to the CSS array in getStyles in Box.tsx.
    • If it is a ResponsiveProp, you should use the getResponsiveStyle helper function
    getResponsiveStyle(theme, [propName], (val) => ({ [cssProp]: theme.spacing(val), })),
  4. Add it to the Box story in Box.internal.story.tsx, by explicity adding it to Basic.argTypes

Props

NameDescriptionDefault
margin
Sets the property margin
ResponsiveProp<ThemeSpacingTokens>
-
marginX
Sets the properties margin-top and margin-bottom. Higher priority than margin.
ResponsiveProp<ThemeSpacingTokens>
-
marginY
Sets the properties margin-left and margin-right. Higher priority than margin.
ResponsiveProp<ThemeSpacingTokens>
-
marginTop
Sets the property margin-top. Higher priority than margin and marginY.
ResponsiveProp<ThemeSpacingTokens>
-
marginBottom
Sets the property margin-bottom. Higher priority than margin and marginXY
ResponsiveProp<ThemeSpacingTokens>
-
marginLeft
Sets the property margin-left. Higher priority than margin and marginX.
ResponsiveProp<ThemeSpacingTokens>
-
marginRight
Sets the property margin-right. Higher priority than margin and marginX.
ResponsiveProp<ThemeSpacingTokens>
-
padding
Sets the property padding
ResponsiveProp<ThemeSpacingTokens>
-
paddingX
Sets the properties padding-top and padding-bottom. Higher priority than padding.
ResponsiveProp<ThemeSpacingTokens>
-
paddingY
Sets the properties padding-left and padding-right. Higher priority than padding.
ResponsiveProp<ThemeSpacingTokens>
-
paddingTop
Sets the property padding-top. Higher priority than padding and paddingY.
ResponsiveProp<ThemeSpacingTokens>
-
paddingBottom
Sets the property padding-bottom. Higher priority than padding and paddingY.
ResponsiveProp<ThemeSpacingTokens>
-
paddingLeft
Sets the property padding-left. Higher priority than padding and paddingX.
ResponsiveProp<ThemeSpacingTokens>
-
paddingRight
Sets the property padding-right. Higher priority than padding and paddingX.
ResponsiveProp<ThemeSpacingTokens>
-
borderStyle
ResponsiveProp<BorderStyle>
-
borderColor
ResponsiveProp<BorderColor>
-
borderRadius
ResponsiveProp<keyof Radii>
-
alignItems
ResponsiveProp<AlignItems>
-
direction
ResponsiveProp<Direction>
-
justifyContent
ResponsiveProp<JustifyContent>
-
gap
ResponsiveProp<ThemeSpacingTokens>
-
backgroundColor
ResponsiveProp<BackgroundColor>
-
display
ResponsiveProp<Display>
-
boxShadow
ResponsiveProp<keyof ThemeShadows>
-
element
Sets the HTML element that will be rendered as a Box. Defaults to 'div'
ElementType
-
position
ResponsiveProp<Position>
-
grow
Sets the property flex-grow
ResponsiveProp<number>
-
shrink
Sets the property flex-shrink
ResponsiveProp<number>
-
basis
Sets the property flex-basis
ResponsiveProp<FlexBasis>
-
flex
Sets the property flex
ResponsiveProp<Flex>
-
minWidth
ResponsiveProp<MinWidth<number>>
-
maxWidth
ResponsiveProp<MaxWidth<number>>
-
width
ResponsiveProp<Width<number>>
-
minHeight
ResponsiveProp<MinHeight<number>>
-
maxHeight
ResponsiveProp<MaxHeight<number>>
-
height
ResponsiveProp<Height<number>>
-