Buttons are typically used to trigger an action, such as submitting a form, opening a menu, or initiating a search. They can also be used to navigate between pages or sections of a website or app. The use of consistent button styles helps to create a cohesive user experience and reduce cognitive load for users.
We have 2 types of buttons, primary and secondary.
Primary buttons
These buttons are designed to be the most prominent and visually distinct on a page or within a user interface. Primary buttons are typically used to indicate the primary action that a user is intended to take, such as submitting a form, initiating a purchase, or creating a new account.
Default
Dark
Button class
qh-btn qh-btn-dark
Button class
qh-btn qh-btn-dark qh-btn-icon-lead
Button class
qh-btn qh-btn-dark qh-btn-icon-trail
Usage guidelines
They should always be used for the most important action on the screen. Primary buttons should be used when the user performs an action, and should describe what happens when pressed.
Primary buttons should be for call-to-actions and are not intended as tools to navigating users to different pages or to another part within the same page, use a text link instead for these situations.
How to use
Primary buttons are a strongest button style and should be only used once on the page. Too many primary buttons can increase cognitive load because people must spend time comparing multiple likely options before making a choice.
Secondary
Secondary buttons are used to provide a visual hierarchy and allow users to perform secondary or less important actions. These buttons use an outlined style which is lower in visual weight in contrast compared to the primary button.
Default
Dark
Button class
qh-btn qh-btn-dark-secondary
Button classes
qh-btn qh-btn-dark-secondary
qh-btn-icon-lead
Button classes
qh-btn qh-btn-dark-secondary
qh-btn-icon-trail
Usage guidelines
Use Secondary Buttons for Less Important Actions: Secondary buttons should be used for actions that are less important than the primary action, but still relevant.
General usage guidelines for buttons
Use the appropriate button component for the appropriate action. Using the wrong button can lead to confusion and frustration for the user.
When to use
Buttons are commonly used to encourage users to take an action, such as “Submit” or “Register”.
When not to use
Do not use buttons in place of text links for simple navigation or for linking to external content. Buttons should only be used when a more prominent call-to-action is needed.
How to use
Do
- Label buttons with what they do for users. The button should clearly show users what will happen when they click it. Use action words to describe the task, like ‘Register’ for a button that lets users sign up. This way, users know what to expect after clicking the button.
- Put buttons where users can easily find them.
- Make the most important button look like it’s the most important one, try to use only one primary action button on a page so that it clearly stands out.
Do not:
- Do not overuse buttons for links as makes them less noticeable.