BalanceReckon Design System

BalanceReckon Design System

Open Playroom Welcome Concepts Contributing

Packages

Getting started Development workflow Next Link

ButtonDeprecated

Sidebar Navigation

Keyboard Shortcuts

Radio Button Group

Segmented ControlDeprecated

DrawerDeprecated

DropdownDeprecated

Tray — Guidelines

Data TableDeprecated

Virtualized Data TableDeprecated

Content

Introduction Capitalisation Date & time Glossary Grammar and mechanics Punctuation Product voice and tone

Patterns

Introduction Accessibility App header Combobox with tags Component composition Forms Assigning test IDs to components

Theming

Introduction Theming playground

OverlaysTray

Tray

Which Tray size to use for a given kind of content.

Overview Guidelines

Sizes

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

Tray

A container that accepts free-form content, available in several sizes.

Avatar

Avatars are used to show a thumbnail representation of an individual or business in the interface.

On this page