Button System
Button Priorities:
- Primary : Can be styled with filled / outline look.
- Secondary
Button States:
- Default
- Hover
- Disabled
How System works!
- Changing state of the button will style the button with different background and text color.
- While hovering over the button will outline the button to make the visible difference clear.
- While button is disabled, the light text color & background differentiate the button making user understand about its disability.
- All colors chosen meet the accessibility criteria.
Reviews
3 reviews
Some of the things I'd suggest to improve:
- Remove "primary/secondary" labels from the buttons — they make it harder to understand how the button looks
- You have 2 buttons named "Primary". The outlined one better have its own classification
- Overall layout and presentation of your work make it harder to understand what's behind it. The better you present your work here — the more reviews you'll attract from the community. Feel free to refactor the cover image, and use the description field to move reasoning out from the image to keep it simpler and more visually appealing. Will be happy to revise the reviews once you make the updates.
Feel free to apply your creativity and present your work in the best possible way. Try exploring how others presenting button systems.
(edited)
The hierarchy isn't clearly established in this button system. To address this, I would recommend first browsing some examples of other systems to understand how hierarchy and visual styles work in buttons.
Additionally, the outlined version should be treated as its own distinct type.
Lastly, both of the disabled states could be made consistent. This way, you create a recognizable pattern for your users to identify disabled elements in your interface.
(edited)
Simple and effective although presentation could be more appealing
11 Claps
Average 3.7 by 3 people
You might also like
Project
Pulse — Music Streaming App with Accessible Light & Dark Mode
Platform & DeviceFor this project, I designed Pulse, a mobile music streaming application for iOS devices (using the provided mobile templat
Project
Islamic E-Learning Platfrom Dashboard
Visual Language & Color I wanted the interface to feel like a quiet room you'd actually want to sit in and study. The warm neutrals - off-wh
Project
SiteScope - Progress Tracking App
🧩 Project OverviewThis project showcases the design of a mobile login and sign up experience for a construction progress tracking app. The
Project
FlexPay
The onboarding was designed to reduce financial anxiety, create a sense of instant reward, and encourage early action. Instead of overwhelmi
Project
Mobile Button System
As my first ever ux design attempt, I tried to go with a simplified approach with only a few button types and states. I kept the color palle
Project
CJM for Co-Working Space - WeWork
This project presents a customer journey map for WeWork, created to understand the end-to-end experience of a remote professional using a co
Visual Design Courses
Course
UX Design Foundations
Learn UX design fundamentals and principles that create better products. Build foundational knowledge in design concepts, visual fundamentals, and workflows.
Course
Introduction to Figma
Learn essential Figma tools like layers, styling, typography, and images. Master the basics to create clean, user-friendly designs
Course
Design Terminology
Learn UX terminology and key UX/UI terms that boost collaboration between designers, developers, and stakeholders for smoother, clearer communication.