Need for additional button variant: "Text"

[janhassel]

I've observed the following situation in many designs over the last years and think it would be worth to create a new button variant for this.

Scenario:
There is a need for a button that aligns with body text and doesn't take up as much space as the ghost button. In these cases, I've often seen the Link component being used to achieve the appropriate visual output. This however creates misleading semantics for users with assistive technologies as these links are not actually navigational but perform an action.

Example:
"See more" button to expand and collapse the full text.

Left: Link, misleading semantics but better visual result
Middle: Small ghost button, correct semantics but awkward visual result
Right: Same as middle, just shifted 1rem to the left. Awkward visual result when hovered or focused

---

Creating a new button variant "Text" (not set on the naming) would help improve accessibility in these use cases (I can share more via slack if needed). It would ideally have no padding to sit flush with any adjacent elements. The hover and focus states would need to be considered (should they mimic the link states or still have more of a button-feeling?)

[AmandaFurukawa]

some more example scenarios:

select all for a group of checkboxes (deselect all)

view more

this was implemented incorrect - it opens a translate popover

[ConradSchmidt]

I have a similar problem in the (IBM) product I'm working for. As @janhassel was mentioning, the Link alternative is not matching from the interaction pattern of "calling" something rather than opening a link. The link only accepts a href which I don't need in this case, as I want to call a JS function. If I use the Link with the onClick attribute, I get these problems:

1. can't be focused (e.g. using Tab, because of the missing href)
2. can't be triggered using Enter or Space(I have to write a separate handler)

Side notes:
If I add href="javascript:void(0) to get the element focused, I get warnings as this is not good practice. What I saw is that devs are using href="-1" (or similar) and then you have to preventDefault which is just more unnecessary code (which needs to be maintained).

Point 2. is the same with the ClickableTile, which is also rendered as a anchor tag. Not sure why its using this tag, but I have to specifically implement the onKeyDown to have proper accessibility.

Here is an image of the used Button like Link ("View all"):