feat: improve FluentButton appearance

[markoweb2]

🙋 Feature Request

The FluentButton default apperance has such a light border, that it is virtually inextinguishable from the default background.
That holds true both in Light and Dark mode.
This makes it very hard for users to understand, that this is a button that you can click on.

🤔 Expected Behavior

UI should be pleasant and easy to use.

It shouldn't be that you have to stare at a thing for 5 seconds before you understand that it is a button you are looking at. It should happen within milliseconds.

😯 Current Behavior

Current behavior is visually exhausting, hard to use and see, confusing. I think this is not in line with what Microsoft wanted to achieve with their Fluent design.

💁 Possible Solution

The Appearance.Outline has a much more visually understandable border, although in my opinion it could be touch darker still.

The problem with Appearance.Outline is that nothing happens visually when you mouse over it. Only the border changes to a slightly darker color, but blink and you miss it. Thus making it not intuitive, user does not register that element as a button in their head - it's just a box.

Ideally the default button would have the border from Appearance.Outline mouse over effect (touch darker), but keep the default darkened background color (or something to that effect) when you mouse over it. (The Outline button would thus become redundant and can be removed)

🔦 Context

I want to accomplish a good, easy to use UI with minimal effort.

💻 Examples

Another gripe I have is with the Stealth and Lightweight button. I think Stealth has the worst design of them all. I have a good high-end 2K screen, which reproduces colors to great effect. And I can barely even see the gray color that it has for a background.
I can easily imagine users behind cheaper monitors (most laptop monitors have very bad nit-s and color accuracy) not seeing that Stealth button at all, it would just 100% blend in with the background color.

For example FluentPersonMenu uses the Stealth button by default for the Sign out button. I simply did not register that Sign Out as clickable at all, it could just as well be a disabled button. Only in the back of my mind do I know it should be clickable, but I can't count on users being that wise. I had to manually create a new header for FluentPersonMenu with an Accent button for the Sign out, for it to make sense. Also a Stealth button is in itself non-sensical, a button's job is not play ninja and hide itself...

Lightweight has the same underlying problem as Stealth, initial though is that it is a hyperlink and not a button. Thus making it completely counter-productive for use.
What Lightweight should be = use the Accent color as the border and the text color, keep the default white background (change it when you mouse over). Now you have a something usable to counter the full on blue accent button.

I can imagine taking the Lightweight button's mouse over effect, applying some darkened border and using the end result as a standard apperance for some type of button (mouse over effects still needed). Not sure what to call it - Appearance.Darkened or something... Haven't played with this idea in Dark mode, as to what it should look there.

[vnbaaij]

Not to simply just ignore your (long) report, but we are following here what is giving to us by the Fluent UI Web Components v2 (which currently implement the Fluent Design v1).
We are nog going to deviate from the styling that is given to us through the web components.

For our next version, we will still wrap the Fluent UI Web Components but those will be v3 and implement the Fluent Design v2. I suggest you take a look at https://web-components.fluentui.dev/?path=/docs/components-button-button--docs and assess the design there. If you feel that needs changing, you could reach out to the Fluent UI Web Components team. They are the ones who could potentially make changes. Not us.

I'll turn this into a discussion item so others can chime in and comment on it but I don't want to give false hope that things are going to change with the v4 version.

PS there is of course always the option to tweak things with your own css. Not ideal but at least you can get your own changes realized.

[markoweb2]

Thanks for the clarification.