Balance Logo
Reckon Design System
Open playroom


A tray is like a modal dialog that's stuck to the bottom of the viewport. It should focus the user’s attention exclusively on one task or piece of information.
pnpm add @balance-web/tray
Import usage
import {
} from '@balance-web/tray';
  • Code
  • API

The Drawer package has been deprecated and will be removed in a future version. Use Sheet instead.


The Tray component accepts free-form children as content. It's up to the consumer how they wish to layout the contents of the tray.

Edit in Playroom


The content tray is available in the following sizes:

  • small - text content or short forms
  • medium - use for medium to large forms
  • large - use for data rich interfaces
  • full - reserved for tables
Copyright © 2024 Reckon. Designed and developed in partnership with Thinkmill.
Bitbucket logoJira software logoConfluence logo