Shape atom

Atomic Components

The shape atom defines the shape of the components of an app, such as thumbnails, buttons, text fields, and many more. The three preset shapes proposed are sharp, rounded, and round.

Introduction

The shape can be set to one of the preset types: Sharp, Rounded, or Round. The preset types allow for quick and easy styling, but it is also possible to customize the radius to create more unique shapes.

This feature allows for consistency in the design of the app, as all GoodBarber components can be set to the same shape. This can be managed globally through the backoffice, with the global shape management , making it easy for designers and developers to ensure a cohesive look and feel throughout the app.

3 styles of shape

3 styles of shape

JSON

Here’s the JSON format of this object :

{

"type": { "sharp", "rounded", "round", "custom" }, // Default value "rounded"

"radius": INTEGER, // Used only in case of "custom" shape

}

Documentation

Radius values

These parameters are valid for all devices:

SharpRadius level 00 px
RoundedRadius level 14 px
RoundRadius level 212 px ou 50% ⚠️

Round Shape Specificities ⚠️

Depending on the component, either a full rounding (i.e. 50% of the total height of the component) or a rounding of 12px will be applied.

There is no real rule and it is the general aspect of the component that takes precedence. This radius is detailed in the section specific to each component.

We can have one of the 3 following cases for a component:

1. Radius of 50% of the total height of the component

Shape on an user avatar and a button

Shape on an user avatar and a button

2. Radius of 12 px

Shape on thumbnail - Alert dialog background

Shape on thumbnail - Alert dialog background

3. Radius of 50% or 12px depending on the state of the component

Shape on text field 1 Line to Multiline

Shape on text field 1 Line to Multiline

Radius distribution

Some components will not receive the Rounded and Round properties on each corner, as can be seen in the examples below.

These values are specified for each component in their respective sections.

Specific application of the atom

Specific application of the atom

Example