Page MenuHomePhabricator

Evaluate when you should use each style of button (primary, flagged, frameless) and clarify in style guide
Open, Needs TriagePublic


Currently there are several different types of buttons (examples based on mw theme):

  • Primary buttons (solid coloured buttons, updated 2016-03-16 to reflect resolved T110555)
    T110565_after_T110555_ButtonWidget_primary.png (134×256 px, 15 KB)
  • Non-primary buttons (framed white buttons, updated to reflect resolved T110555)
    T110565_after_T110555_ButtonWidget.png (145×219 px, 13 KB)
  • Frameless buttons (they look like links with extra padding)

Screenshot 2015-08-28 09.47.20.png (275×353 px, 21 KB)

  • Frameless buttons styled like tabs (message dialogs)

Screenshot 2015-08-28 09.47.44.png (321×532 px, 20 KB)

The distinction between when to use primary vs non-primary buttons is vague and seemingly arbitrary. As different versions for primary/non-primary buttons only exist for progressive, constructive, and destructive styles, and having multiple progressive, constructive, and destructive buttons on the same form is generally a sign that the form is a horrible mess and needs to be redone (not necessarily an issue with anything ooui I've seen yet, but there are extensions that would have this problem if converted, and the thing they share in common tends to be that they really are just a mess), this should be reconsidered.

Frameless buttons by themselves are, essentially, simply not buttons. If having buttons somewhere is out of the question, a link should be used. However, it appears that a primary purpose for frameless buttons is also to allow for other styles of buttons to be specified (such as in message dialogs). This should be avoided, as it adds unnecessary complexity for users to parse, designers to design around, and developers to implement and maintain. If the existing buttons do not work or look good in a particular setting, the reasons why should be determined and addressed within the overall theme/form/whatever.

These different button types should be standardised into a single style that adequately supports all use cases.

Event Timeline

Isarra raised the priority of this task from to Needs Triage.
Isarra updated the task description. (Show Details)
Isarra added projects: UI-Standardization, OOUI.
Isarra added subscribers: violetto, Isarra, Aklapper.

More neutrally, "Explain when to use each type"?

@matmarex What is the current process of selecting in development on when to use a ButtonWidget, a flagged ButtonWidget and a primary ButtonWidget?
@Jdforrester-WMF referred in another task to the rule of using maximal one primary button in a dialog. Anything else? cc: @Pginer-WMF

Jdforrester-WMF renamed this task from Consolidate different button types into a single style to Explain in the design guide when you should use each style of button (primary, flagged, frameless).Mar 16 2016, 7:24 PM
Jdforrester-WMF triaged this task as Low priority.

In VE primary buttons are used for the primary progressive action in a dialog/inspector, especially when other secondary actions are available. There is typically only one primary action on a given form.

@Esanders And what's the rule for flagged (coloured) "normal" ButtonWidgets?

Volker_E renamed this task from Explain in the design guide when you should use each style of button (primary, flagged, frameless) to Evaluate when you should use each style of button (primary, flagged, frameless) and clarify in style guide .Mar 16 2016, 11:11 PM

@Esanders And what's the rule for flagged (coloured) "normal" ButtonWidgets?

I don't know exactly when a progressive secondary button is used vs a normal secondary button, but there are fairly clear cases where a secondary button would be destructive: if the user inspects something in VE and is offered "Edit" and "Delete" buttons, the "Delete" button would clearly not be the primary button, but would also clearly be flagged as destructive.

@Volker_E Thanks for tagging. I think my only questions are around nomenclature of variant/property, and therefore more broad and not directly related to this task. Happy to discuss those question outside of this task.

CCiufo-WMF raised the priority of this task from Low to Needs Triage.Feb 20 2024, 3:24 PM
CCiufo-WMF moved this task from Inbox to Backlog on the Design-System-Team board.