Button System Design
This button system is designed for consistency, accessibility, and visual clarity across all use cases. It includes both text based buttons and icon only variants, each with defined interaction states.
Layout and spacing:
- Fixed height: 48px for visual consistency and click target accessbility.
- Horizontal padding: 32px on both sides of the button content to maintain generous breathing space.
- Icon gap: 6px between text and icon ensures readability and visual balance.
Reviews
4 reviews
Lorem ipsum dolor sit amet consectetur. Pretium pulvinar odio aliquet condimentum suspendisse nibh vel arcu. Bibendum in imperdiet sapien quisque odio gravida. Malesuada aliquet elit egestas placerat amet. Ornare in scelerisque ut gravida amet. Tristique amet amet bibendum enim cursus. In vehicula mauris tincidunt arcu aliquam nunc. Tincidunt vitae netus ante eu et bibendum. Eget amet nibh vel est congue tellus tortor gravida nascetur. Ut vestibulum elit pulvinar netus in ante lectus turpis auctor. Nulla purus morbi
Lorem ipsum dolor sit amet consectetur. Pretium pulvinar odio aliquet condimentum suspendisse nibh vel arcu. Bibendum in imperdiet sapien quisque odio gravida. Malesuada aliquet elit egestas placerat amet. Ornare in scelerisque ut gravida amet. Tristique amet amet bibendum enim cursus. In vehicula mauris tinc
Lorem ipsum dolor sit amet consectetur. Pretium pulvinar odio aliquet condimentum suspendisse nibh vel arcu. Bibendum in imperdiet sapien quisque odio gravida. Malesuada aliquet elit egestas placerat amet. Ornare in scelerisque ut gravida amet. Tristique amet amet bibendum enim cursus. In vehicula mauris tincidunt arcu aliquam nunc. Tincidunt vitae netus ante eu et bibendum. Eget amet nibh vel est congue tellus tortor gravida
Great work!
20 Claps
Average 5.0 by 4 people
You might also like
Project
ASOS User Journeys: Heuristic Insights from Trustpilot
As an ASOS customer, I have had no issues with the user experience when using the website. Which is why when I started this project I was su
Project
Totara course creation process - Heuristic Analysis
About Totara and the analysis Totara is one of the world’s largest Learning Management Systems. It provides millions of people their daily p
Project
Clothing App - Mobile Onbparding
As a beginner UI/UX designer, my decision-making process for crafting the onboarding experience began with understanding the users—what woul
Project
QuillPath Colour System
OverviewThis project was all about creating a fresh, functional, and accessible colour system for a digital work management tool. The goal w
Project
Balans Kitchen Web Design + Development
Project
🧪 Uxcel Heuristic Analysis
Research OverviewObjective: Conduct competitive audit & use it to define what is quality within the space of UX design courses. And when I k
Visual Design Courses
Course
UX Design Foundations
Learn UX design basics to acquire a solid foundation in UX design principles. Acquire the skills needed for product development and improving user experience.
Course
Introduction to Figma
Learn essential Figma tools like layers, styling, typography, and images. Master the basics every UX designer needs 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.