Button System Design

This project focuses on designing a versatile button system that includes three states—primary, secondary, and tertiary—along with shape variations and optional icon support to accommodate various design possibilities.

Background

This project began as an introduction to design systems, focusing on mastering their principles. Since buttons are a fundamental component of any interface and serve as key user interaction points, the need for a well-structured and professional button design became essential.

Overview

This project begins by applying a predefined color system to distinguish each button feature. It then introduces three button sizes—large, medium, and small—to ensure responsiveness. Additionally, it incorporates various icon options, including no icon, right icon, left icon, and icon-only variations. These elements lay the foundation for an adaptable button system, with more features to be explored in this presentation.

Surprize

A simple game created for using the button system. You will find the link below to try it!

Link to The Game -> Game

Link to Button Component • Button Component