import { Level } from 'bumbag';


The <Level> component that assists in creating layouts where it's children are evenly spaced.

When the viewport is below tablet, the level will snap to a vertical orientation.


A <Level> can be of a vertical orientation with the orientation prop.

#Vertical breakpoint

By default, Level will turn vertical under the tablet breakpoint. However, you can change this with the verticalBelow prop.

Try drag the viewport with the slider!

You can disable the vertical snapping by setting verticalBelow to null.

#Vertical spacing

You can modify the space between the vertical items with the spacing prop.

#Vertical alignment

You can modify the alignment of the vertical items with the alignX prop.


#Level Props

orientation "horizontal" | "vertical"

Sets the orientation of the level.

spacing string

Sets the spacing of the level when it snaps to a vertical orientation.


(string & {})
  | "tablet"
  | "mobile"
  | "fullHD"
  | "widescreen"
  | "desktop"

Sets the breakpoint at which the level should become vertical.

Inherits Flex props
Inherits Box props


  | (ComponentClass<any, any> & { useProps: any; })
  | (FunctionComponent<any> & { useProps: any; })

className string


  | number
  | boolean
  | {}
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<...>)>
  | ReactNodeArray
  | ReactPortal
  | ((props: BoxProps) => ReactNode)

alignX "right" | "left" | "center"

alignY "top" | "bottom" | "center"

altitude string

variant string

colorMode string

disabled boolean


  useCSSVariables?: boolean;
  altitudes?: AltitudesThemeConfig;
  borders?: BordersThemeConfig;
  borderRadii?: BorderRadiiThemeConfig;
  ... 94 more ...;
  Template?: TemplateThemeConfig;

elementRef ((instance: any) => void) | RefObject<any>

themeKey string


Copyright © 2020 Jake Moxey