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.

Editable example


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

Editable example

#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!

Editable example

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

Editable example

#Vertical spacing

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

Editable example

#Vertical alignment

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

Editable example


#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; null to disable vertical snapping.

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"

variant string

colorMode string

disabled boolean


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

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

themeKey string


On this page
Copyright © 2021 Jake Moxey