Button

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

Medium

Preset medium size

Large

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

Medium

Preset medium size with an icon

Large

Preset large size with an icon

Properties

Shape

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

Sharp

Sharp shape on button

Rounded

Rounded shape on button

Round

Round shape on button

Border

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

Border atom on button

Shadow

For more information on the property: Shadow atom section.

Shadow atom on button

Do / Don't

Good 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

Tablet & Web

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

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

Inline Buttons

Mobile / Tablet / Web

Even with a very short text, the button will take up at least 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

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

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: