How should I organize buttons in a design system?
Your design system can include as many button variations as needed. Here’s how you can organize them:
-
By size: Common sizes include large, medium, and small.
-
By type: Variations can be label-only, icon + label, label + icon, and icon-only.
-
By hierarchy and style: Primary and CTA buttons should be visually prominent, while secondary and tertiary should be more subtle.
-
By padding: Adding or removing padding creates variants for flexible layouts. For example, a plain button without padding might fit neatly in tight spaces, like next to content areas.
-
By state: Web apps usually have five states: enabled, hovered, pressed, focused, and disabled. Mobile apps typically use just three: enabled, pressed, and disabled.
-
For light and dark modes: Ensure buttons have variations for both light and dark modes, with sufficient contrast (minimum 4.5:1 ratio).
Additional organization: You can also group buttons by user flow (e.g., onboarding, account settings) or by platform (web vs. mobile), depending on your project’s needs.
Deep dive
There are different ways to organize buttons in a design system. No matter which approach you choose, it's important to stay consistent. Using a defined system will make your work so much easier and more efficient.
In this article, we’ll share a system you can start using right away.
By size
You can organize buttons by size. While your button style guide might include specific sizes like extra-large or extra-small, let's focus on the standard sizes:
-
Large
-
Medium
-
Small
These buttons have fixed heights, but their widths adjust based on their content.
They also have rounded corners, but as you work with master components, elements like corner radius, height, and padding can be easily adjusted with a single click. This video does a great job of explaining the idea of components in Figma.
By type
The specific button types in your design system will vary, but for now, let's focus on four specific types to help you understand the logic behind the approach.
-
Label
-
Icon + label
-
Label + icon
-
Icon
Now, let's combine these four types with the three sizes from the previous section.
These 12 variations will be our parent components. This means that any design changes you make at this level will automatically update across all variants in the design system.
Pro tip: When adding icons, create a separate file, page, or frame to organize all the icons you'll be using. Create different icon variants for each button size you have.
Provide these icons in the following variations:
-
Monochrome
-
Hierarchical
-
Palette
-
Multicolor
In the end, you will have a system with 12 variations for each icon.
Next, convert them into components, group them as variants, and assign a name. Thus, you will easily select the icon within the component.
By hierarchy and style
Some buttons need to stand out and grab the user's attention immediately—these are your primary and CTA buttons. Others serve alternative or supporting purposes and don't need to be as visually prominent. These are your secondary and tertiary buttons.
They vary in both purpose and style. Use this to organize them in your design system.
-
Primary and CTA buttons: These should stand out visually, typically as filled UI elements with prominent colors. For example, a primary button could use a dark blue brand color, while a call to action might use a vibrant orange for contrast.
-
Secondary button: It can either have an outlined style or a more subtle filled color.
- Tertiary button: It can blend into the background, often appearing as text-based buttons or with minimal styling.
Related reading: What should be considered in app button design?
Now, your design system consists of 60 variants.
By padding
Plain buttons in design systems can have two variants: one with padding and one without. For the version without padding, adjust the height to the "Hug" value.
Here’s why a plain button without side padding can be useful:
Now, a "Filter" button without padding fits perfectly on the right side of the content area.
And just like that, your button design system expands to 72 variants.
By state
When designing for a web app, your button UI style guide usually has five states. A mobile app typically requires only three – enabled, pressed, and disabled. For now, focus on the web version, as states can be added or removed later as needed.
Now, your button design system already contains 360 variants.
For light and dark modes
As more apps offer dark mode, create separate versions for this UI. Typically, using lighter colors for buttons helps them stand out against a dark background. However, ensure the contrast between the text and its background meets the minimum ratio of 4.5:1. Also, ensure the design is visually appealing and the colors work well together.
Related reading: How to design accessible buttons?
Here is a final version with 720 variants.
Speed up this process
Since Figma introduced Properties, designing has become faster and more efficient. By adding properties to components, you can easily control variations like states, text, icons, and colors. They simplify managing different component versions without creating numerous individual variants.
Learn more: Explore component properties
Additional recommendations
You can also organize buttons in your design system by user flow, grouping them based on where they are used, such as onboarding or account settings buttons. Another option is to group buttons by the platforms they are used on, such as web apps or mobile apps.
The approach you choose will depend on your team's needs and personal preferences.
🤝 Credits
Our content combines the knowledge of Cieden’s designers with insights from industry influencers. Big thanks to all the influencers for sharing awesome content!
-
How I create a design system for buttons by Ross Horbi
- A guide to design buttons for your design system by Raouf Belakhdar