Notifications with 2+ buttons should use primary and secondary button styles

[daviddossett]

Currently notifications are configurable to display multiple primary buttons. Here's an example from our notification guidelines:

Generally using a bunch of primary actions is avoided as a basic UX principle—mostly given the added load it places on users to understand which option is the most likely one to take.

I can think of a few approaches off the top of my head:

• Strictly enforce against using multiple primary actions in the API
• Somehow lint for multiple contributed primary actions to gently discourage extension authors
• Just add guidance to the notification API docs
• Some combination of the above

This could extend to other areas as well (empty views, for example).

[gjsjohnmurray]

I'm not aware that we extension developers currently have a way of signalling that a MessageItem is or is not a primary action.

[bpasero]

I am not sure I understand the motivation behind this:

• is this about only ever showing a single button in a notification
• or about having a way to mark 1 button as primary so that the others can be shown less prominently?

@misolori maybe my memory is wrong, but didn't you once work on a design where only 1 button in a notification toast shows in blue and the others in grey or less prominent to simulate how a real dialog would look like?

Feedback to suggestions:

Strictly enforce against using multiple primary actions in the API

We cannot do that unless we want to break our API which we never do.

Somehow lint for multiple contributed primary actions to gently discourage extension authors

I think that is equally against our rules, besides I wouldn't even know how to do that with TypeScript today, and we have no API specific linting as far as I know. I also think this would be against our model of shipping a vscode.d.ts file that extensions compile against to get their errors and warnings.

Just add guidance to the notification API docs

Sure we can do that but I doubt it would change anything since we cannot enforce it.

If we want to go down the path of a visual update, a pragmatic solution could be to only render the first button in blue and the others in a different color to indicate the primary button, like a dialog:

[daviddossett]

• is this about only ever showing a single button in a notification
• or about having a way to mark 1 button as primary so that the others can be shown less prominently?

The latter. The basic idea is to ensure we aren't confusing users with 2+ primary buttons. Instead I think we should follow the modal pattern (like your screenshot above) where there can be multiple buttons, but only one primary. The rest would be styled as secondary buttons.

If we want to go down the path of a visual update, a pragmatic solution could be to only render the first button in blue and the others in a different color to indicate the primary button, like a dialog.

I think this could work. I'd imagine it would put some of the burden on the author to ensure the action they deem to be primary in the first position. Certainly better than nothing as they would get the visual feedback when they see the notification and could correct the order as needed.

[bpasero]

Let's wait for Miguels feedback, I think we had designs on this...

[bpasero]

I also wonder if the notification toast is focused and I hit Enter key, whether the primary action should execute.

[daviddossett]

Sounds good!

Whoops, edited the title at the same time as you 😅