Balance Logo
Reckon Design System
Open playroom


Exposes helpers to manage elevation of components renderred through Portals, usually in the root of the document.
pnpm add @balance-web/elevate
Import usage
import {
} from '@balance-web/elevate';
  • Code
  • API


  • Only use this package for managing elevation of components that are renderred outside of normal HTML flow i.e component renderred to the root of the document.
  • App developers should rarely use this package, it's mainly for Balance internals.


The Elevate component bumps the elevation modifier of its children. The elevation modifier can be accessed through the useElevationModifier hook or be directly applied by passing the zIndex value to the useElevate hook. Elevate components can be nested in themselves.

The elevation modifiers are automatically applied to elevation tokens from the theme but must be manually applied to any custom zIndex values.


Below is a demonstration(through values) of how elevation changes are applied.

Edit in Playroom

In our theme, Dropdowns have a lower elevation than Drawers which means a dropdown will always appear under a drawer. But what about a Dropdown inside a drawer? It appearing under the drawer doesn't seem correct. So BAL internally elevates the Drawer body which results in the Drawer's children always appearing above it.

Nested drawers and toasts

Toasts should appear above all other elements regardless of their relative elevation. In the below example we see that a toast can be opened in the parent drawer that appears on top of the nested drawer when opened.

Copyright © 2024 Reckon. Designed and developed in partnership with Thinkmill.
Bitbucket logoJira software logoConfluence logo