Buttons2024-04-18T03:09:59+00:00

Buttons

On this page

    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

    Button class

    qh-btn

    Button class

    qh-btn qh-btn-icon-lead

    Button class

    qh-btn qh-btn-icon-trail

    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

    Button class

    qh-btn qh-btn-secondary

    Button class

    qh-btn qh-btn-secondary qh-btn-icon-lead

    Button class

    qh-btn qh-btn-secondary qh-btn-icon-trail

    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.
    Back to top