Boutons

Anatomy

Principal buttons

Main Buttons A user interface typically includes three types of main buttons:

• Primary Button: This button is used for the most important actions, like making a payment, submitting a form, or deleting an item. As the key action on the screen, it should stand out visually to guide the user. There should only be one primary button on the screen.
• Secondary Button: This button triggers actions that are still relevant to the user, but less critical than the primary action. For instance, a button for saving and another for canceling. The cancel action is usually a secondary one, appearing with less emphasis than the primary button. It can be used multiple times on a screen.
• Tertiary or Ghost Button: These buttons are used for less important tasks that the user can perform, so they are designed to be less prominent. For example, a "reset password" button on a login page. They are minimalistic in design and can appear several times on the interface, which is why they are referred to as "ghosts."

Target Size

Smaller targets are harder to click or tap compared to larger ones. This is particularly challenging for individuals with limited motor control or for those using their phone with one hand, relying on their thumb.

• WCAG suggests a minimum size of 44px by 44px for clickable areas.
• Increase the size of commonly used buttons to enhance usability and reduce the risk of users overlooking them.
• Ensure a minimum of 12px spacing between buttons to prevent accidental taps on the wrong one.

Additional buttons

In addition to the main buttons, it’s possible to include extra buttons in an interface, though they aren’t always present. These additional buttons serve specific functions:

• Floating Action Button (FAB): Commonly seen on mobile devices, a FAB provides a shortcut to the main actions of the interface. When clicked, it triggers an action. Typically designed to stand out, it’s often circular with an icon inside, accompanied by shadows to create the effect of floating. A good example is Gmail’s "Compose new email" button.
• Icon Button: This type of button is used when there isn’t enough space to include a labeled button but still requires user interaction. Examples include a paper plane icon for sending, or a trash bin icon for deleting in a data table.
• Link: Links function as buttons too. They allow users to navigate to different sections or pages within the interface. These are usually text-based elements, often colored differently to show they are clickable.

Button Types and States

User interfaces usually feature two main button types: primary and secondary, with possible tertiary styles for Calls to Action (CTAs). These buttons have various interactive states, which are crucial for accessibility, helping users understand how they’re interacting with the interface. Specifically, the focus state should be clearly visible, as it aids keyboard navigation. The main button states are:

• Default
• Hover
• Pressed
• Focused
• Disabled

Best practices to use buttons

Set a minimum button size

Establish a minimum width for buttons to maintain a consistent screen hierarchy, even if a secondary button ends up being wider than a primary one. This also ensures users can click them comfortably.

For small interactive elements, extend the target area beyond the visual bounds of the element. This means that even if someone misses the element, there’s a good chance they’ll still trigger the action.

Balance icon and text pairs

When combining icons with text, aim for equal visual emphasis to create a more cohesive and balanced appearance.

Use consistent weight

Keep the icon and text at the same weight or thickness to visually connect them. This also creates a more balanced look.

Match the size

Ensure the icon size is similar to the size of the text for consistency.

Color contrast

When choosing colors, it’s essential to consider the meanings people associate with each one. For instance, red may signal a negative action, like reject, cancel, or stop, while green typically represents positive actions, such as accept, continue, or go. Additionally, ensuring sufficient contrast for button text is crucial for accessibility. Make it Clear always strives to meet WCAG AAA standards, the highest level of Web Content Accessibility Guidelines conformance.

Use concise labels

Button labels should be short and clear, explaining the action in as few words as possible so users immediately understand what it does.

Icons should be easily recognizable

When adding icons to buttons, keep them simple and avoid overly complex shapes. This will help users quickly understand their purpose.

Use familiar icons

Choose icons that are widely recognized for their specific action. For example, use a magnifying glass for search. There's no need to reinvent the wheel.

Limit button styles

Avoid using too many different button styles. Create a clear visual hierarchy and stick to a few button types to make navigation straightforward for users. It’s fine to have multiple buttons with only two distinct styles.

Ensure all button states are functional

Provide developers with clear, well-defined button states for proper implementation. Make sure all states work as intended, so the interface functions as designed.

Group related buttons

Place buttons that belong together in close proximity to show users that they are related actions. Spacing them too far apart can create confusion.

Use labels when possible

If space permits, use text labels for buttons, as they provide clearer explanations of their function. If space is limited, use icon buttons but always accompany them with a tooltip that explains the icon’s action when hovered or long-clicked, especially on mobile.

Link buttons

States

Link buttons have four states:

• Normal
• Hover
• Focus
• Visited

Link underlines

Link underlines are often overlooked, yet they remain the clearest and simplest way to help users identify links. By default, they can appear too thick and visually heavy, but their thickness can be adjusted to create a lighter and more balanced appearance while maintaining clarity.

Link icons

When your link destination opens in another window you should add an "open in new window" icon to indicates users that they are leaving this page.