Balance Logo
Balance
Reckon Design System
Open playroom

Component composition

This document aims to provide guidance for consumers on how best to compose Balance components, affording flexibility within the constraints of the system.

What is composition?

In React, composition is a natural pattern of the component model. It's how we build components from other components, of varying complexity and specificity through props. Depending on how adaptable these components are, they can be used in building many other components.

How do I build this example for myself?

Designs like this are rarely built top-to-bottom in a single pass. Instead, they typically start very simple, with further details and refinements added in layers.

To give you a sense of what this looks like, the following tutorial will guide you through the design process that you might go through when using Playroom.

At any stage you can click the “Open in Playroom” button under the examples to view the design.

1. Create the basic content

Adding the basic content up front is a great place to start, allowing us to consider the hierarchy of information as we iterate. We’ll apply some basic formatting using Heading and Text.

Edit in Playroom

2. Space out the content

You’ll notice that there is no space between components by default. This is actually a good thing: we now get to decide exactly how spaced out we want the content to be. To achieve this, we’ll use a Stack component which applies space evenly between its child elements.

Edit in Playroom

3. Group content

Grouping the content into sections can help provide structure to the information, and in turn, make it easier to digest. Let’s divide the information into four descrete sections — the header, metadata, body and footer. For this, we’ll start nesting new Stack components within our existing Stack.

Edit in Playroom

4. Provide hierarchy

Not all the information presented has the same priority. To improve readability, we can adjust the tone and/or the size of the information. In this case, pushing some details back to “muted” and/or adjusting their size can help focus the user’s attention.

Edit in Playroom

5. Add icons

Icons can be used to serve as visual cues to complement data and introduce some more visual interest. Let’s add icons to our list of metadata.

Edit in Playroom

6. Add a splash of colour

Let’s add a visual cue to indicate that this pay summary is in progress. To do this, we’ll add a Badge component above the content.

Edit in Playroom

7. Add an action to the corner

Sometimes adding new features can necessitate changing the layout. First, we’ll use a Flex component to break our header into sections.

To make this easier to follow, we'll use placeholders for the first part.

Edit in Playroom

Now let's put the header content back in, and place an IconButton beside it. Notice that we're using justify to influence the "space-between" elements.

Edit in Playroom

With the header layout adjusted, let’s reinstate our pay summary content.

Edit in Playroom

8. Polish

Now that we have all our elements in place we can polish until we are happy. Adjusting white space between elements, or even responsively, to achieve the desired goal.

In this case, we might loosen up the metadata section by increasing the gap to “small”.

Edit in Playroom

Next steps

Now that you are familiar with the code we have just written, this is a good chance to head over to Playroom and continue refining this design.

You may want to consider:

  • Using VisuallyHidden to adjust the metadata labels for users of assistive technology, who aren't able to infer contextual clues from the icon.
  • Implementing the Dropdown for the icon button
Copyright © 2024 Reckon. Designed and developed in partnership with Thinkmill.
Bitbucket logoJira software logoConfluence logo