I was tasked with designing a button system, which included different sizes, states, icons and hierarchy build into it.
The first thing I did is gather what was currently available. Next I went to the different design teams and listened to their needs. One main concern was that smaller CTAs were needed, as the current ones where 75px in height. Disabled and destruct buttons, as well as tertiary buttons were also needed. With this in mind I started some research on the web about how to build a button system for a ui kit. I took inspiration from other design languages that are out there, such as Carbon Design and Atlassian Design, for example. After that I did some research on what buttons are necessary and how they should be styled to be used most effectively. It's amazing how important every detail is, such as typography, min height to ensure accessibility guidelines for touch target, color and so on.
Once I created my system, which now includes primary, secondary, tertiary, destruct, disabled and icon buttons, as seen in the image below, I was ready for my accessibility meeting. I needed to make sure that these buttons will pass the w3 wai Aria guidelines and contrast requirements. To ensure usability for disabled visual users and for high contrast mode, a invisible border was added.
Product teams are designing their own buttons, because they don't like the current ones.” —D. from Digital Optimization
Ghost buttons drive me crazy. It goes against usability. The concept is a designer’s fantasy trend that should die. The only time I find this tactic useful is when a client insists in having two CTAs on the page, and I basically want one to disappear. Ghosted buttons have ghost conversions.”—Angie Schottmuller