Tech Button System
Note:
This project was updated on July 9, 2025, to reflect feedback received and to enhance the clarity and completeness of the component system.
Introduction
In this project, I designed a comprehensive button system component for a tech-focused financial app, specifically for users interacting on Android devices while deciding how much to invest in a cryptocurrency. The system includes five button types — Primary, Secondary, Tertiary, Text, and Destructive — each available in multiple states: Default, Hover, Focused, Disabled, and Loading. It also supports leading icon configurations for each state, ensuring quick recognition and consistent interaction feedback. The system is fully adaptive to both light and dark modes and adheres to WCAG AA contrast standards.
Objective
The goal was to build a scalable, responsive, and accessible button component that maintains visual clarity and usability across all device sizes and themes.
- Comprehensive variants: Each button type is available in default, hover, focused, disabled, and loading states, with additional variants featuring leading icons. These cover a wide range of user interactions while ensuring consistency in behavior and appearance across different contexts.
System logic:
The component supports the following button roles:
- Primary: High-emphasis actions with the brand’s yellow background and near-black text.
- Secondary: Mid-emphasis with a lighter fill.
- Tertiary: Low-emphasis with a subtle outline.
- Text Button: Minimal, borderless design for inline or navigational use.
- Destructive: Red-accented for critical actions like delete or cancel, used sparingly to preserve urgency.
Accessibility
- Color Contrast: All button roles and states meet WCAG AA contrast ratios, confirmed via the Stark plugin in both light and dark themes.
- Interactive States: States are visually distinct using outlines, shadows, opacity changes, and strong focus indicators for keyboard/screen reader users.
Reviews
1 review
Hello João Ribeiro,
I have a couple of comments, just some suggestions that could help make your components even better and more polished.
What’s done well
Clear coverage of states: All the essential states Default, Hover, Focused, Pressed, and Disabled are included, which is great for building predictable interactions.
Variety of button types: Primary, Secondary, Tertiary, Text, and Destructive types are all clearly defined and styled accordingly.
Icon flexibility: Both leading and trailing icon versions are included, which allows for flexible usage across different scenarios.
Visual consistency: The overall design looks clean and consistent, with well-balanced spacing and styling choices.
What could be improved
Component structure: Currently, the default, leading icon, and trailing icon buttons are separated as if they’re different components. Instead, they should all be part of a single button component with variant properties this makes design updates easier and keeps the system scalable.
Icon handling: Rather than separating left and right icon buttons, it would be better to have a single property like icon position (none, left, right) inside the same component.
Size variants missing: It would be helpful to include sizes like XS, S, M, etc., so the button can adapt to different screen sizes and layouts.
Loading state missing: Adding a loading state would cover a very common use case and make the component more complete.
There’s no indication of how this component adapts to mobile. Instead of building a separate mobile version, the same component can support mobile via size and spacing variants. You can check out Google’s Material 3 Button component as an example. All button types, states, icon options, and sizes are handled within a single component using variants: https://www.figma.com/community/file/1035203688168086460
You might also like
Sojo NFT Marketplace
Heuristic Evaluation of Revolut Mobile App
Hulu Through My Eyes - A Cinematic UI Exploration (unofficial)
From Idea to Full-Stack Web App
Docto
Fundraising Website
Visual Design Courses
UX Design Foundations
Introduction to Figma
Design Terminology
