Uploaded image for project: 'SonarQube'
  1. SonarQube
  2. SONAR-12086

Use a specific button for primary and secondary actions

    XMLWordPrintable

    Details

    • Type: Improvement
    • Status: To Design
    • Priority: Trivial
    • Resolution: Unresolved
    • Affects Version/s: None
    • Fix Version/s: None
    • Component/s: UX/UI
    • Labels:
    • Edition:
      Community
    • Production Notes:
      None

      Description

      In some pages, some actions are more important than others. We currently have only one type of button that put all actions at the same level. It would be great to give more visibility to the primary action to guide the users.

      To do so, we should introduce a new design of button.

      A few examples:

      • On the issue page, once an issue is selected, the primary action becomes the button "bulk change".

      • In modals the primary action is (in this case) apply the changes. The secondary is the action to cancel the changes. The first one should use the primary button and the second one the secondary button. 

       

       

      New design:

      Primary button/action

      Use this button to indicate an action that is clearly more important than the other actions. Not all features need a primary action. Sometimes the actions are secondary to the content. This button should be used once by component screen.

      Specification:

      Normal state

      • background-color: same as border

      Hover state

      • background color:  #174461 (or #872129 for red destructive buttons)
      • color: #D1D1D1

       

      Secondary button/action

      Use this button to indicate action to the user (the current button design) Use this version when the button would be too distracting to the experience.

      Specification:

      Normal state

      • current design

      Hover state

      • background color:  #236A97 

        Attachments

          Activity

            People

            Assignee:
            Unassigned Unassigned
            Reporter:
            mathieu.cutivel Mathieu Cutivel (Inactive)
            Votes:
            1 Vote for this issue
            Watchers:
            3 Start watching this issue

              Dates

              Created:
              Updated: