Button Design Guide
In interface design, few elements are as small and yet as decisive as a button. Although its appearance may seem simple, its function is critical, acting as the bridge between the user’s intent and the action they expect to perform.
A well-placed, properly designed button can guide users naturally, reduce friction in a task, and make interaction with a digital product feel smooth and clear.
Beyond its shape or color, a button communicates. It indicates what is important, what is available, what comes next. That is why its design cannot be left to chance or depend solely on aesthetic preferences. Every decision (size, text, color, spacing, or state) affects how the user interprets and uses it.
Visual construction of a UI button
Designing a button is not just drawing a rectangle with text inside. It requires thinking about how it looks, how it is touched, and how it is understood. Every visual and functional detail influences clarity, legibility, and accessibility.
Size and interactive area
One of the first aspects to define is size. On mobile, accessibility guidelines (WCAG) recommend a minimum interactive area of 44 × 44 px to ensure it can be tapped comfortably. On desktop, buttons typically range from 32 to 48 px high, depending on hierarchy and context:
- Primary buttons: larger and more visible.
- Secondary and tertiary: more discreet, yet always accessible.
Internal and external spacing
Padding lets the button text breathe — usually 12–24 px per side, depending on size — improving both appearance and the active touch zone.
Externally, keep enough visual separation from other interface elements (texts, forms, images, etc.) to avoid accidental taps and reinforce visual hierarchy. A gap of 8–16 px between buttons or related components is recommended.
Types of buttons according to size
Standard button sizes in UI, classified by size (Small, Medium, Large) and based on best practices in responsive design, accessibility, and common design systems such as Material Design, Atlassian, or IBM Carbon:
Types of buttons according to hierarchy: primary, secondary, and tertiary
Not all buttons carry the same weight, so it’s vital to establish a clear hierarchy that helps users distinguish the main action from complementary ones.
To this end, three types of buttons are commonly used: primary, secondary, and tertiary. Each fulfills a specific role and must be designed consistently within the system.
Primary button
- Role: the main action the user should take on a screen or component.
- Usage: only one per content block or flow. It must stand out clearly.
- Style: solid background (usually the primary brand color), high-contrast text (often white), visually dominant.
Secondary button
- Role: offers an alternative or complementary action alongside the primary.
- Usage: more than one may appear, but never visually competing with the primary.
- Style: white or transparent background, border in a neutral or primary color, text in the primary color.
Tertiary (ghost) button
- Role: for less frequent actions that don’t require prominence.
- Usage: helpful in lists, auxiliary components, or dense interfaces.
- Style: no background or visible border, just text (sometimes with an icon); often feels more like a link than a conventional button.
Types of buttons according to their states
Beyond hierarchy, buttons need visual states that tell users what they can do, what they have done, or what is happening. These states help anticipate, confirm, or avoid errors.
- Active / Default: Ready to be used; meets minimum contrast.
- Hover: Slight color or shadow change; indicates interactivity.
- Focus (keyboard): Visible outline or shadow; crucial for accessibility; different from hover.
- Active / Pressed: Darkens or moves slightly while clicked/tapped; immediate feedback.
- Disabled: Lower contrast but still legible; no hover/focus response; remains in the DOM for screen readers.
- Loading: Spinner or text like “Sending…”; prevents double clicks; sets expectations.
- Success / Error: Transient; may turn green with a check or show a warning color; always include a clear message.
Button text: short, clear, action-oriented
A button’s label should be a clear invitation to act. It connects user intent with what will happen on click. It’s not just any word; it must precisely communicate the action, using brief, direct, comprehensible language.
Good button copy should:
- State the action: e.g., “Submit form,” “Save changes,” “View details,” “Download PDF.” Avoid generic “Click here.”
- Clarify the outcome: if possible, anticipate the effect — “Continue to checkout” vs. just “Continue.”
- Use user-centered verbs: infinitive or imperative forms tied to user goals — “Explore content,” “Request access,” “Create account.”
Behind every button lie many decisions that directly influence how people interact with a product. That’s why, when we design buttons, we pay close attention to detail, context, and the overall experience.
This is a translation of the following article from our corporate website:
