Buttons!

[wibjorn]

Let's talk about buttons. 🔘🔼🔽🔲🔳

https://design.docs.microsoft.com/components/button.html

[brianeckmann]

Starting off the conversation here...hoping to keep the integrity of buttons since they aren't really a big issue at the moment (i.e. causing problems) so hopefully we can minimize the work and focus on other needs. We'll definitely want to touch a few things up (e.g. round the buttons a tad more).

Consider these as suggestions based on my outsider POV from seeing a hundred other design systems (and I know much of DocsUI came from Bulma).

In a DS the difference in button types is not color, but rather the size and whether it's filled or outlined. The type signifies the hierarchy of the call to action: click this first, or click this. There shouldn't be a design that has a primary, secondary, and tertiary all in a row. More accurate use cases:

• primary button with a secondary (outlined) button—not a secondary button that's a different color (e.g. gray)
• primary button with one or more ghost or icon buttons

We want to associate filled-in buttons as primary, and ideally stick to one color (blue). Or in the case of a branded page, we have a different primary color. Secondary buttons are not filled and should be outlined or ghost, there shouldn't be a filled-in color defined as secondary or tertiary. The term "secondary" button could be removed altogether.

In the case of success, info, danger, warning, those are global colors that could be applied to other elements (e.g. successful green submission text or a text input error). There could be a use case we want to use a defined color token for a button (e.g. red danger button to delete something) but these should be defined under the approved color modifiers to buttons.

Fully rounded buttons should not be a thing, we have one value for button radius. A fully-rounded button is a different element—a clickable tag.

For sizes, the default is medium so there is no need to have both.

All in all...I don't think we need to modify a whole lot, it's more of a matter of organization and how we talk about them. I want to avoid design using different words like "secondary" in a different context than development so I'm hoping we can use the IA to help align.

[Courtny]

Wanted to shake my thoughts out on this one:

I think there is really just these (at least to start us off):

1. Primary = Color: [Blue] and has three modifiers (Clear, Outlined, Filled)
2. Danger = Color: [Red] and has three modifiers (Clear, Outlined, Filled)
3. Muted = Color: [Gray] and has three modifiers (Clear, Outlined, Filled)

The rough image I show here is NOT actual final color values, just a quick sketch.

[Courtny]

Notes from Teams thread:

In general, I was trying to keep the button naming rather specific. So you have labeling of the button type by the specific action (Primary or Danger) and then a modifier depending on the emphasis needed (_filled, _outlined, _clear) or whatever. Stick to a blue and a red button for now. And mono-chromatics (gray on white, white on black) for our themed variants. High Contrast is a special context but the primary and danger should just have a HI-C color value assigned by default.

[Courtny]

There are certain situations where a colored button variant may be needed. I was hoping we could figure out a clever way to have our Notifications banners recognize there is a button inside, and appropriately map a color. Some sort of a descendant button detection that has auto-mapped colors.

I would not feel comfortable just opening up these modifiers or buttons styles to every designer/dev.

Here is an example of these very specific contexts (using outlined style):

[Courtny]

So, in summary buttons have:

1. Type of button (blue, red, monochrome)
2. Style of button (filled, outlined, clear)
3. Size of button (small, medium, large)

• We can avoid the additional context sensitive colors for now; but be considering smart solutions for those in the future to support different Semantic and Brand backgrounds.
• Icon style buttons are an extension, and Brian has it figured out. I expect iconography to work seamlessly regardless of button color, style, or sizing.

[jdanyow]

I agree with this 👆 For 1, how about:

• "default": monochrome
• "primary": blue
• "danger": red
• "inverse": automatically chooses either black or white depending on the perceived lightness of the background. We use this type of button in cards with branded backgrounds, typically the outlined and clear styles.

[wibjorn]

@jdanyow why don't we skip inverse for now and circle back to it? Or just keep our current is-transparent?

[Courtny]

More notes summarizing design direction:

• Filled / outlined / clear for each button color.
• Only a solid blue / standard is outlined / we also have semantic colored outlined buttons
• small / medium / large (14, 16, 18 pixels)

:hover - Darken (Light theme) / Lighten (Dark theme)
:focus - Retaining the current striped focus

[janaUX]

Adding to the button discussion...

I think 'buttons' is the place where we don't need to get creative as a platform.

I'd recommend aligning entirely with Fluent buttons attributes (sizes, paddings, colors, states, etc), so users benefit from carrying the same mental model across Microsoft products More details on Fluent here
And we avoid having discrepancies within our platform, increasing product quality and user satisfaction as a result of that standardization.

Below are some examples of button discrepancies I found around the Docs ecosystem.

---

1. Button size variation

---

2. Command button style variation/affordance

---

3. Icon button style variation

Another important point this will fix - for users who have a touch screen computer, use Docs on a tablet or phone, or have dexterity issues - they don't have the appropriate touch target area that right now is below 48x48dp.

[Courtny]

Thanks for this Jana!

[Courtny]

Here is the latest design documentation for review @jdanyow @wibjorn

Figma - Buttons 1.0

[wibjorn]

👍 As of #208 the implementation for buttons within Atlas is done and can be viewed on the documentation site ⭐

https://design.docs.microsoft.com/components/button.html

[Courtny]

Buttons, as published currently in the Atlas Figma library.

[Courtny]

Todo: Add in semantic color buttons to Figma library at later date.