Buttons in different Design systems

Buttons in Carbon Desing System

Buttons are divided into:

Basic – for the main call to action on the page. Primary buttons should only appear once per screen (no app title, modal dialog, or sidebar).

Secondary – for additional actions. And yes, the extra buttons can only be used in conjunction with the main button. The function of the secondary button is “Cancel” or “Back”.
Tertiary – used for independent actions or together with the primary if there are multiple calls to action.

For actions that may have destructive consequences for user data (such as erasure or erasure). The Hazard button has three styles: primary, tertiary, and ghost.

Ghost –  is minimal information. Connection  No outlines.


IBM Design Buttons

I like that ABM has a system of hanging buttons that do not line up with the main design. This creates a pleasing asymmetry.


Buttons IMS Design System

The buttons fit thoughtfully into the design layout of the page.Buttons Types and Layout in Carbon Design


Button sizes are also multiples of the grid design and are 16, 24, and 32 pixels.


sizis of buttons

Material Design and using Buttons

I like to explore where on the screen different design systems place their buttons. For example, in material design, an active, main button is most often placed on the edge of the block. Listed on the left side of the card. At the end of the list – on the right side of the block.

buttons design in Material Design System

Buttons in Windows

In Windows, buttons can be arranged in order from left to right. From active to inactive. An active button on the left and two secondary buttons on the right.  See below for the Save button.

buttons design in Microsoft Fluent System

Buttons in Adobe Spectrum

The types of buttons in the Adobe system are also based on the principles of the accent color of the main button and its other types. With or without an icon. With or without outline.

buttons spectrum design systembuttons adobe design system

Lexicon Design System

  1. Never use two main buttons at the same time. There should be only one primary button representing the most important action.

ruls of using buttons

2. Always use specific words, not general ones like “OK”.

rules of using two buttons

Anton Skrypnyk
Anton Skrypnyk