Designing a button for a technological system: managing teams & projects

I designed a button system — a carefully thought-out and flexible system that provides an intuitive user experience in any interface.

Hierarchy

Button hierarchy is a visual button ranking system that helps users clearly understand which button is the most important and which action should be performed first. Proper use of the button hierarchy can improve the user experience, make the interface more convenient and intuitive.

• Primary
• Secondary
• Tertiary 

I added the ability to use a button with two icons, one, or no icons

Modes

Compatibility with dark and light modes: Buttons look great on both light and dark backgrounds thanks to dynamic color and contrast adaptation.

States of the button

Micro-interaction: Button states play an important role in providing a clear and intuitive user experience. They visually inform the user whether the button can be interacted with, what it does, and what state it is currently in.

• Visually inform the user whether the button can be interacted with, what it does, and what state it is in.
• Use different states, such as Default, Hover, Press/Active, Focused, Disabled, Success, Warning, Error, to clearly differentiate between different situations.
• Default
• Hover
• Press/Active
• Focused 
• Disable
• Success
• Warning
• Error

I have designed three button sizes:

The size of a button is an important factor that affects its visibility, usability, and overall aesthetics. Choosing the right button size can improve the user experience and make your interface more user-friendly.

• Affect the visibility, usability, and overall aesthetics of the interface.
• Use small buttons for minor actions, medium buttons for major actions, and large buttons for critical actions.
• Consider the screen size and context of use when choosing a button size.
• Small buttons (40px)
• Middle buttons (48px)
• Large buttons (56px)

This button system is a powerful tool to help you create intuitive and effective interfaces.

As you can see, buttons are not just elements that allow users to perform actions. They play an important role in providing a clear and intuitive user experience. Proper use of button states, sizes, and hierarchy can greatly enhance your interface, making it more user-friendly, enjoyable, and effective.