Secondary buttons look exactly like disabled buttons

[timobrembeck]

Describe the Bug

The "preview" and "save as draft" buttons are grey to separate them from the "publish/update" buttons.
However, this has the disadvantage that they look exactly like disabled buttons.

Expected Behavior

It's ok to separate them from the "main" button by a separate color, but grey is a bad choice

Actual Behavior

They look disabled

Additional Information

For the "preview" button I think it could make sense to use the same color as for filters (since the meaning of the light blue could be described as "something that has no immediate influence on the state of the system"):

For "draft" this isn't ideal however, since it changes the database and the click itself cannot be reversed.

[seluianova]

As an option - make the disabled button lighter + gray text?

Or we could reduce the opacity for disabled buttons while keeping the original color:

But then the "Show filters" button should be gray, so it doesn't look disabled.

[timobrembeck]

@digitalfabrik/ui-ux-team do you have input on this?

[JoeyStk]

I know my opinion isn't really asked here, but I like outline and ghost-buttons as secondary buttons
. I think if we only have two levels of hierarchy I would go for outline buttons, if we have more than two I would go for ghost buttons

[timobrembeck]

@JoeyStk Cool idea!
If we don't get a response by the UI/UX team, I think we can go ahead and implement this guideline:

        &.btn-ghost {
            @apply bg-blue-100 text-blue-500;
            &:hover {
                @apply bg-blue-200;
            }
        }
        &.btn-outline {
            @apply border-2 border-blue-500 text-blue-500 bg-white;
            &:hover {
                @apply bg-blue-100;
            }
        }

[hauf-toni]

@JoeyStk Cool idea! If we don't get a response by the UI/UX team, I think we can go ahead and implement this guideline:

        &.btn-ghost {
            @apply bg-blue-100 text-blue-500;
            &:hover {
                @apply bg-blue-200;
            }
        }
        &.btn-outline {
            @apply border-2 border-blue-500 text-blue-500 bg-white;
            &:hover {
                @apply bg-blue-100;
            }
        }

@JoeyStk @timoludwig from an ui/ux perspective the outlined button is the best choice here, as it complies with best practice standards, see Google Material components ("Use an outlined button for actions that need attention but aren’t the primary action[ ...]"
If you tag @digitalfabrik/ui-ux-team , you can also tag @hauf-toni , this will also point me to the thread via mail. I appreciate that, thank you :)

[timobrembeck]

@hauf-toni ah sorry, I thought mentioning the team had the same effect, but ok I will use the individual username in the future.
Would be cool though if we could somehow fix the notification settings, since the team name is easier to remember...

[JoeyStk]

We discussed this issue in our bi-weekly-meeting between service team, UI/UX team and our team. We came up with the following solution:

• Secondary buttons should become outline buttons (as seen in the screenshot above)
• Buttons that fulfill a different purpose than the rest of the buttons on the page should become ghost buttons (as seen for preview in the screenshot above)
• Disabled buttons should remain grey, but if possible a less saturated grey tone (for example #A1A1AA)
• Add styleguide / documentation for this so future developers have a guidance when making the choice

With this information the issue should be ready for implementation and therefore was moved to the current milestone with a low priority

[timobrembeck]

@JoeyStk Sounds good, thanks for clarification!

Disabled buttons should remain grey, but if possible a less saturated grey tone (for example #A1A1AA)

I would suggest to stick with our existing color palette, so ideally we could choose a lighter grey from https://tailwindcss.com/docs/customizing-colors
(At the moment, it is gray-500/#6b7280, so we could move to gray-400/#9ca3af)

[JoeyStk]

Yes, sounds reasonable. @hauf-toni was referring to the Integreat color scheme, but also said we were free in making the final decision of what works best for us. So let's try gray-400 then 👍