---
title: "Shape atom | GoodBarber's Design System"
description: "This property is used to manage the shape of components.\r\n\r\nAll GoodBarber components manage it in order to keep consistency. We have **global shape management** in the backoffice.\r\n\r\nIt has 3 preset types **Sharp**, **Rounded** and **Round**, but it"
canonical_url: "https://www.goodbarber.com/uxdesign/atom-shape/"
lang: nl
---

# Shape atom | GoodBarber's Design System

[Design System](https://nl.goodbarber.com/uxdesign/)

![](https://portal.ww-cdn.com/portal_static/svg/fapro/solid/grid.b60a521defb3.svg)

[https://nl.goodbarber.com/uxdesign/](https://nl.goodbarber.com/uxdesign/)

![](https://portal.ww-cdn.com/portal_static/svg/fapro/regular/chevron-up.4b0a6b4e88c8.svg)

![](https://portal.ww-cdn.com/portal_static/svg/fapro/regular/chevron-down.e16b9408a703.svg)

![](https://portal.ww-cdn.com/portal_static/svg/fapro/solid/grid.b60a521defb3.svg)

[Overview](https://nl.goodbarber.com/uxdesign/)

- [Foundations](/uxdesign/foundations/)
* Layout
+ [Grid](/uxdesign/grid/)
+ [Spacing](/uxdesign/spacing/)
+ [Breakpoints](/uxdesign/breakpoints/)
+ [Layers](/uxdesign/layers/)
* Graphic elements
+ [Color](/uxdesign/color/)
+ [Typography](/uxdesign/typography/)
+ [Images Aspect Ratios](/uxdesign/images-aspect-ratios/)
+ [Icons](/uxdesign/icons/)
- [Atomic Components](/uxdesign/atomic-components/)
* [Color atom](/uxdesign/atom-color/)
* [Font atom](/uxdesign/atom-font/)
* [Image atom](/uxdesign/atom-image/)
* [Gradient atom](/uxdesign/atom-gradient/)
* [Shape atom](/uxdesign/atom-shape/)
* [Shadow atom](/uxdesign/atom-shadow/)
* [Size atom](/uxdesign/atom-size/)
* [Border atom](/uxdesign/atom-border/)
* [Blur atom](/uxdesign/atom-blur/)
* [Overlay atom](/uxdesign/atom-overlay/)
* [Immersive feedback atom](/uxdesign/atom-immersive-feedback/)
- [UI Components](/uxdesign/ui-components/)
* [Background](/uxdesign/background/)
* [Text Field](/uxdesign/textfield/)
* [Dropdown](/uxdesign/dropdown/)
* [Date & Time Picker](/uxdesign/date-time-picker/)
* [Checkboxes & Radio Button](/uxdesign/checkboxes-radio-button/)
* [Button](/uxdesign/button/)
* [Thumbnail](/uxdesign/thumbnail/)
* [Form](/uxdesign/form/)

# 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.

[https://portal.ww-cdn.com/portal_static/images/designsystem/videos/atom_shape.e1bbc8515934.mp4](https://portal.ww-cdn.com/portal_static/images/designsystem/videos/atom_shape.e1bbc8515934.mp4)

## 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](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Atoms-Shape.51a21a7b55fc.gif)

*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:

|  |             |  |  |  |                    |  |   |  |                         |  |
| --- | ----------- | --- | --- | --- | ------------------ | --- | --- | --- | ----------------------- | --- |
|  | **Sharp**   |  |  |  | Radius **level 0** |  | ▸ |  | **0 px**                |  |
|  | **Rounded** |  |  |  | Radius **level 1** |  | ▸ |  | **4 px**                |  |
|  | **Round**   |  |  |  | Radius **level 2** |  | ▸ |  | **12 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](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Atoms-Shape-Radius-12px.72c56f34361b.png)

*Shape on an user avatar and a button*

**2. Radius of 12 px**

![Shape on thumbnail - Alert dialog background](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Atoms-Shape-Radius-50percent.c99eeb1c8c5f.png)

*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](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Atoms-Shape-TextField.5c043e4fc641.gif)

*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](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Atoms-Shape-Radius.2f2c45134256.gif)

*Specific application of the atom*

### Example

[Atoms-Shape-Video](https://player.vimeo.com/video/764851243?h=8f29351ae8&badge=0&autopause=0&autoplay=1&loop=1&player_id=0&app_id=58479)