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
Tools used
From brief
Topics
Share
Reviews
6 reviews
10/10 Great work
I am Sepanta, and I’d like to commend you on the solid foundations you’ve built in this button system project. The emphasis on color differentiation, size variations, and optional icons brings depth and flexibility to your design. This approach shows clear attention to detail, especially since buttons play such a vital role in user interaction.
However, as you continue to refine your design system, it might be beneficial to focus more on your presentation skills and how you demo your components. Consider using more visually engaging elements, exploring vibrant color palettes, refining your typography choices, and incorporating more dynamic visual aids to showcase your buttons in action. These tweaks can make your demos not only informative but also exciting and memorable.
Overall, nice work so far—keep pushing forward, experimenting with different styles, and sharpening your presentation to truly highlight the versatility and impact of your button system.
Awesome work mate!
Hey Mariam,
I had the pleasure of reviewing your submission and would like to share some feedback:
Your prototype and visual presentation are both intuitive and visually compelling. You’ve done an excellent job covering various states, types, and possible button combinations with precision.
I also explored the game you attached and it is truly impressive.
Overall, I thoroughly enjoyed reviewing your project and look forward to seeing more of your work in the future. Keep up the great work, and continue channeling your passion into your designs!
I would like to commend her for this outstanding work, as it is both inspiring and beneficial.
Nicely done and good use of colours
You might also like
Sojo NFT Marketplace
From Idea to Full-Stack Web App
Docto
Hulu Through My Eyes - A Cinematic UI Exploration (unofficial)
Fundraising Website
NEWFASHON™ - Landing page
Visual Design Courses
UX Design Foundations
Introduction to Figma
Design Terminology
