Filled buttons vs outlined buttons styles
There is a lack of rules on when and how to use filled vs outlined button styles. In my opinion:
- There should only be one primary action per context (see example below for what “context” means). Primary actions are the single most important action that moves the task forward in that context.
- Secondary actions should always use an outlined button style (this includes the gray button style).
An exception to this would be destructive/irreversible actions, such as deleting an object (e.g. branch, project, etc.). In this case, the button should always use the outlined style. When pressing the outlined “Delete” button, a dialog/modal should appear, where the “Delete” button should be filled, as it is now the primary action. As an example, compare the current Branches page with filled “Delete” buttons, with this tweaked version.
To be clear, removing an object from a collection (e.g. an issue from a board) is not a destructive action, it's a change (neither positive or negative, but neutral) that can be reversed.
Defining what context means depends on the information displayed on the screen, the user's flow, and the available tasks.
Take this example, where we have 2 contexts:
- configuring the Prometheus instance, defined by the section titled “Prometheus”
- managing monitored metrics, defined by the section title “Metrics”
Each of these contexts has one primary action, identified by the green filled buttons “Save changes” and “Add metric”. As you may also notice, the button to delete a metric uses the outlined style.
Now, when the user tries to edit a metric on the “Monitored metrics” list, which is a part of the managing monitored metrics context, a new temporary context is created: editing a specific metric. This context is temporary in the sense that an action must be taken to conclude. This is the same as pressing a button and opening a dialog/modal, which is also a temporary context. In this case, there is no dialog/modal, and the interaction takes place inline. For this reason, the “Save” button is treated as a primary action (the single most important action to move that task forward in that context).