**Context**

Currently in our pre-Primer toolbars, we use the "pressed" state of buttons to indicate that something is active/enabled. Some key examples:

* **Watch**: pressed when watching a work package

* **Filter**: pressed when the filter panel is displayed

* **Baseline**: pressed when the baseline panel is visible


However, this isn't always the case. In other cases, we do not use the pressed state:

* **Favourite projects** in the project list: unfilled star (invisible button), goes to filled but still invisible (with immediate Primer tooltip that tells you what you're doing)

* **Watch in Wiki pages**: not pressed when watching; a change of icon and label (Watch/Unwatch)

* **Reminders**: Not pressed when a reminder is active; a badge will be shown instead: <mention class="mention" data-id="61314" data-type="work_package" data-text="#61314">#61314</mention>

* **Include projects**: Not pressed when the include projects panel is visible

* **Live time tracking:** Not pressed when active; the icon changes and the icon-button becomes a button with a time-elapsed label

* **Sharing work pacakges:** Not pressed; a badge is shown with the number of &#39;shares&#39;

* **Starred projects:** A star is either visible or not in the list of projects when enabled; the action is only visible on hover.

* **Locking/unlocking a wiki page**: not pressed since action only available in the More menu; a change of icon and label (Lock/Unlock)


**Approaches**

To summarise, we have four approaches used in OpenProject at the moment to indicate that something is active in OpenProject:

Begin of the insertion<figure class="table op-uc-figure_align-center op-uc-figure"><table class="op-uc-table"><tbody><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p"><strong>Approach</strong></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><strong>Pros</strong></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><strong>Cons</strong></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><strong>Remarks</strong></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p"><strong>The additionEnd of the insertion Begin of the deletion * ChangeEnd of the deletion of Begin of the deletion icon colour (filled), along withEnd of the deletion a Begin of the insertionbadge (with a number)</strong></p></td><td class="op-uc-table--cell"><ul class="op-uc-list"><li class="op-uc-list--item"><p class=" op-uc-p">Useful to indicate more information, like the numberEnd of the insertion Begin of the deletion tooltip

* The additionEnd of the deletion of Begin of the insertionshares</p></li><li class="op-uc-list--item"><p class=" op-uc-p">Existing pattern in Angular buttons (eg. Watchers), users will be familiar with it</p></li></ul></td><td class="op-uc-table--cell"><ul class="op-uc-list"><li class="op-uc-list--item"><p class=" op-uc-p">Icon buttons don't allow badges out of the box in Figma</p></li><li class="op-uc-list--item"><p class=" op-uc-p">Additional horitonzal space needed</p></li><li class="op-uc-list--item"><p class=" op-uc-p">Sometimes,End of the insertion a Begin of the insertionnumber is innacurate to indicate on/off</p></li></ul></td><td class="op-uc-table--cell"><p class="op-uc-p">TheEnd of the insertion badge Begin of the insertionis useful in buttons, but not for active/inactive.</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p"><strong>Pressed button (that stays pressed)</strong></p></td><td class="op-uc-table--cell"><ul class="op-uc-list"><li class="op-uc-list--item"><p class=" op-uc-p">Clearly visible</p></li><li class="op-uc-list--item"><p class=" op-uc-p">Existing pattern in Angular buttons (eg. Filter), users will be familiar with it</p></li></ul></td><td class="op-uc-table--cell"><ul class="op-uc-list"><li class="op-uc-list--item"><p class=" op-uc-p">Misusing the 'pressed' state</p></li><li class="op-uc-list--item"><p class=" op-uc-p">Semantically dubious</p></li><li class="op-uc-list--item"><p class=" op-uc-p">Not always obvious something is active</p></li></ul></td><td class="op-uc-table--cell"><p class="op-uc-p">Not ideal.</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p"><strong>A change of icon</strong></p></td><td class="op-uc-table--cell"><ul class="op-uc-list"><li class="op-uc-list--item"><p class=" op-uc-p">No additional space required</p></li><li class="op-uc-list--item"><p class=" op-uc-p">Supported out out the box with Primer, no modifications needed</p></li></ul></td><td class="op-uc-table--cell"><ul class="op-uc-list"><li class="op-uc-list--item"><p class=" op-uc-p">Too subtle.End of the insertion Begin of the deletion

* End of the deletion The Begin of the insertionuser would need to remember the <i>other</i>End of the insertion Begin of the deletion pressedEnd of the deletion state Begin of the insertionto know if something is on.</p></li><li class="op-uc-list--item"><p class=" op-uc-p">Does not draw the eye at all, indistiguisable from non-active buttons.</p></li></ul></td><td class="op-uc-table--cell"><p class="op-uc-p">Too subtle.</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="background-color:hsl( 85, 100%, 93% );"><p class="op-uc-p"><strong>AEnd of the insertion Begin of the deletion

* AEnd of the deletion change of icon Begin of the insertion+ colour fill.</strong><br><strong>(+ Tooltip on hover)</strong></p></td><td class="op-uc-table--cell" style="background-color:hsl( 85, 100%, 93% );"><ul class="op-uc-list"><li class="op-uc-list--item"><p class=" op-uc-p">Clearly distinguishable from other icons</p></li><li class="op-uc-list--item"><p class=" op-uc-p">No Primer component needs to be modified</p></li><li class="op-uc-list--item"><p class=" op-uc-p">No additional space required</p></li><li class="op-uc-list--item"><p class=" op-uc-p">Existing pattern (Favourite project button in a project list)</p></li></ul></td><td class="op-uc-table--cell" style="background-color:hsl( 85, 100%, 93% );"><ul class="op-uc-list"><li class="op-uc-list--item"><p class=" op-uc-p">Custom icons might need to be created</p></li><li class="op-uc-list--item"><p class=" op-uc-p">Can still be a bit subtle, depending on colour</p></li></ul></td><td class="op-uc-table--cell" style="background-color:hsl( 85, 100%, 93% );"><p class="op-uc-p">A good balanceEnd of the insertion Begin of the deletion

* A changeEnd of the deletion of Begin of the insertionexisting behaviour, visual cues and space-saving.</p><p class="op-uc-p">The tooltip text needs to have something like ARIA described-by for accessibility.</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p"><strong>Add label toEnd of the insertion button Begin of the insertionwhen active</strong></p></td><td class="op-uc-table--cell"><ul class="op-uc-list"><li class="op-uc-list--item"><p class=" op-uc-p">The clearest wayEnd of the insertion Begin of the deletion (from iconEnd of the deletion to Begin of the insertionindicate (eg. "Watch" vs. "Unwatch")</p></li><li class="op-uc-list--item"><p class=" op-uc-p">Can communicate additional information (eg. Time tracking shows time elapsed)</p></li><li class="op-uc-list--item"><p class=" op-uc-p">Less ambiguity</p><p class=" op-uc-p"><br></p></li></ul></td><td class="op-uc-table--cell"><ul class="op-uc-list"><li class="op-uc-list--item"><p class=" op-uc-p">Doesn't work in an icon-only format</p></li><li class="op-uc-list--item"><p class=" op-uc-p">Need additional horizontal spacing</p></li><li class="op-uc-list--item"><p class=" op-uc-p">Width isn't necessarily fixed</p></li></ul></td><td class="op-uc-table--cell"><p class="op-uc-p">Doesn't work in most cases.&nbsp;</p><p class="op-uc-p">Can potentially keep this behaviourEnd of the insertion Begin of the deletion text,End of the deletion for Begin of the insertionsome niche use-cases (eg. time tracking), to be discussed.</p></td></tr></tbody></table></figure>

End of the insertion Begin of the deletion example)


End of the deletion **Decision need**

Primer does not have guidelines on whether a pressed state can be used as an persistent indication of state (as opposed to indicating that the button is being pressed at that moment). There are reasons _not_ to mis-use the pressed state to indicate state, notably because there are other components like a toggle or a segmented control that are better suited to this.&nbsp;

However, when space is a premium and adding a toggle (which requires a label) is impractical, the pressed state can be very useful. Also, there are certain cases with &#39;enabled&#39; state is a lot clearer than a change in icon.

The question then is: **Should we continue using the pressed state in our Primerised design? If so, when should we use it vs other options?**

**Relevance**

These decisions will mostly be relevant to our re-design of our Primerised split screen header and work package details sections:

* ###58599

* ###61516


<br>

<br>