## Background
In the past we've been seeing confusion in product teams which of the various basic interaction elements to choose from in which context. The general user focus guidance would be improved by a guideline for an overarching page interaction element hierarchy.
**Description:** An overarching guideline to recommend on interaction element hierarchy and choice between:
- links
-- normal link
-- new/red link
-- neutral link (see below)
- normal buttons
- quiet buttons
- primary buttons
-- buttons with icons and label or
-- icon-only buttons
- secondary buttons, currently quiet progressive and quiet constructive buttons
- groups of buttons, see T327426
Related question, when to use static icons? {T301328}
NOTE: We will also need to revisit the current content in the "[[ https://doc.wikimedia.org/codex/latest/components/demos/button.html#types | Types ]]" section of the docsite and evaluate if there is a better way to explain the different type of buttons.
**History:** We're currently missing strong guidelines in the Codex Style Guide on when to choose which of the more basic interaction elements.
**Known use case(s):** Different interaction elements prioritized in siloed product teams lead to confusing page composition when skins, extensions and external user-interface library
**Considerations:** [[ https://phabricator.wikimedia.org/T327426 | This other task ]] is being looped into this task.
### User stories
As a designer, I'd like to know which of the DS interaction elements are best used when.
### Guideline specification
| guideline spec sheet |
=== Open questions
- Should a third type of link besides the new/red link be considered for the design system? A neutral link? Related task T311270
- Still an open question, but not blocking this task
- Should this guideline also live in DSG?
- No, this will only live on the Codex site. We're archiving DSG.
### Acceptance criteria for done
**Design**
[x] Gather an inventory/audit where there is ambiguity of links styled as buttons, or buttons styled as links
[x] Review current usage of button and link components
[x] Design the [[ https://docs.google.com/document/d/1ukQ1HaTNy9wfe52dsiwTzTrc199rgsecnqNGK9OGo-8/edit?pli=1 | guidelines ]]
**Code**
[] Implement the guideline in Codex