È arrivato il Cyber Monday! Crea un'app e approfitta subito del 50% di sconto!

Button

UI Components

Whether it’s used for navigation, actions, or form submissions, the button component allows users to interact with apps clearly and intuitively.

Introduction

The Button component is a fundamental element of any user interface and plays a crucial role in the GoodBarber design system. Whether it's used for navigation, actions, or form submissions, the Button component allows users to interact with your app in a clear and intuitive way.

In the GoodBarber design system, we've put a lot of thought into the design and functionality of the Button component to ensure that it is consistent and easy to use across all devices and platforms. The component is available in different styles and can be customized to match the overall design of your app.

Anatomy

Most of the time, the length of the buttons is dynamic according to the displayed text. Exceptionally, it will be constrained by the layout, as shown here.

The button component comes in 3 sizes: Small, Medium and Large.

Basic button

The padding, font size and height vary depending on the size of the component.

Small
Preset small size

Preset small size

Medium
Preset medium size

Preset medium size

Large
Preset large size

Preset large size

Icon button

The padding, font size, height and icon size vary depending on the size of the component.

Small
Preset small size with an icon

Preset small size with an icon

Medium
Preset medium size with an icon

Preset medium size with an icon

Large
Preset large size with an icon

Preset large size with an icon

Font size

Font sizes change only according to the button size chosen and are the same on all devices. For more details on font sizes, please refer to this table.

Component SizeText LevelAll Devices
SmallButton 114
MediumButton 215
LargeButton 316

Small
Text size with the preset small size

Text size with the preset small size

Medium
Text size with the preset medium size

Text size with the preset medium size

Large
Text size with the preset large size

Text size with the preset large size

Properties

Shape

Below, the Shape atom applied to the button with the types Sharp / Rounded / Round:

Sharp
Sharp shape on button

Sharp shape on button

Rounded
Rounded shape on button

Rounded shape on button

Round
Round shape on button

Round shape on button

Border

By default, the Border Atom value is 1px when the Outline option is enabled::

Border atom on button

Border atom on button

Shadow

For more information on the property: Shadow atom section.

Shadow atom on button

Shadow atom on button

Do / Don't

Good practice for button style
Good practice for button style
Bad practice for button style
Bad practice for button style
✓  Do✕ Don't
・Text + Border・Text + Border + Drop Shadow
・Text + Background・Text + Background + Border
・Text + Background + Drop Shadow・Text + Background + Border +Drop Shadow

Layout

Stacked buttons

Mobile

Whether the text is short or long, the button will take up all 4 columns of the page.

Button width on mobile

Button width on mobile

Tablet & Web

Even with a very short text, the button will take up at least 2 columns :

Button width on tablet & desktop

Button width on tablet & desktop

If the length of a button exceeds 2 columns, the largest button is used:

Button max width on tablet & desktop

Button max width on tablet & desktop

Inline Buttons

Mobile / Tablet / Web

Even with a very short text, the button will take up at least 2 columns:

Buttons on 2 columns

Buttons on 2 columns

In case of a long text, we cut the word by using ellipsis:

Buttons on 2 columns - Max width

Buttons on 2 columns - Max width

Form

Depending on the device, the layout of a button associated with a Text Field may vary:

On Mobile, the 2 components are one on top of the other because of the lack of space. The button takes up the whole width of the page:

Button in a form on mobile

Button in a form on mobile

On Tablet and Web, if the 2 components are one on top of the other the button will have its minimum length. If they are on the same line, the Text Field takes the space left by the button:

Button in a form on tablet & desktop

Button in a form on tablet & desktop

Modal

1 button: center alignment
One button in a modal

One button in a modal

2 buttons: right alignment
Two buttons in a modal

Two buttons in a modal

Footer

If the button is in a footer, the Top and Bottom paddings around the button will be 8px:

Button in a footer

Button in a footer