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:
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.
Use it whenever you would use custom CSS.
If you need layout styles, use the Stack or Grid components instead.
BoxProps
interface in Box.tsx
.
[propName]: number
, use [propName]: ThemeSpacingTokens
;[propName]: ThemeSpacingTokens
,
define it as [propName]: ResponsiveProp<ThemeSpacingTokens>
.getStyles
in Box.tsx
.
ResponsiveProp
, you should use the getResponsiveStyle
helper functiongetResponsiveStyle(theme, [propName], (val) => ({ [cssProp]: theme.spacing(val), })),
Box
story in Box.internal.story.tsx
, by explicity adding it to Basic.argTypes
Name | Description | Default |
---|---|---|
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 marginXYResponsiveProp<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>> | - |