'Link' buttons

[36degrees]

What

Buttons that look like links, for secondary or tertiary actions.

Example of two buttons – one using our default ('primary') button style, and one styled to look like a link.

Why

We think there are a couple of reasons why designers may want to style buttons to look like links:

• where conceptually the thing the user is clicking makes sense as a link, but where a form needs to be used (an example might be a 'log out' link or a link that performs some destructive action, which might trigger a POST or DELETE request)
• to complete some secondary or tertiary action (such as saving partially completed forms to a database), but without giving visual weight to that button – for example, to avoid 'competing with' the primary action.

It might be that one or both of these needs could be met by secondary buttons instead, which we think might be clearer.

If our position is that we do not think this should be done, we still need to document that, especially if we find that using buttons styled as links does impact accessibility or usability.

[36degrees]

@leekowalkowski-hmrc raised some good points about user expectations in a conversation on Slack:

• User who right-click on the 'link' would expect to see options in the context menu relating to links, such as 'Open in a new tab' - which they would not see if that link was actually a button.
• Users of dictation software who see the 'link' on the page would expect to be able to trigger it by saying 'click link save and return to overview', which may not work if the link is actually a button.
• Users of assistive technology would not see the 'link' in their rotor / list of links, despite being able to see it on the page.

[36degrees]

Additionally, users might expect to be able to middle-click or alt-click on the 'link' to open it in a new tab, which would not work as expected.

[36degrees]

There have also been discussions around whether a button styled as a link should have role="link", in the same way that links styled as buttons have role="button".

There was extensive discussion around adding role="button" to those links and there is a shim to match behaviour against users expectations (being able to trigger a link with role="button" using the space bar).

[NickColley]

Related to this is the secondary buttons

[armstrongb]

We found from our use (on survey collection at ONS) that users of dictation assistive technology had issues trying to select a button that was styled as a link because the software refused to acknowledge it as a 'link'.

We have since adopted the links must always look like links and buttons as buttons approach and designed accordingly.

[timpaul]

This is relevant, from @adamsilver : https://medium.com/simple-human/but-sometimes-links-look-like-buttons-and-buttons-look-like-links-9b371c57b3d2

[leekowalkowski-hmrc]

Just to nit-pick; in modern web design even buttons themselves very rarely look like buttons, they often look 'probably clickable'. Designers seem so convinced I need better buttons, that I've forgotten what the gorgeous buttons in my lovely sleek modern browser or operating system look like!

Links sometimes don't need to look like links, or buttons, for example image or product galleries, the bigger the click region the better, so the whole container is often clickable and still I'd have a user expectation that it's going to behave like a link and definitely not like a button.

[edwardhorsford]

A few weeks back I added examples from several services using 'link' buttons to the secondary buttons issue. Adding here now as this is the more specific issue.

I feel like it's a more common pattern than people realise - and having a solution to it (or guidance for why it's not ok) would be great.

Examples

Register cosmetics

Register to vote

(these are anchor tags, enhanced with javascript)

Examples from the secondary buttons thread

Accordion component

(hasn't got an underline, but otherwise looks like a link)

Cancel links

Cancel links might also often be 'buttons' - if they're doing a destructive action (flushing a cache?).

GOV.UK Publishing

(potentially these really are links going to a confirmation page)

[edwardhorsford]

Skip this page links

Note we have this in my service - pressing it unchecks an option the user had picked on a previous page and notes the current page as no longer required - hence why it's not just a link to the following page.

[NickColley]

Just as another note on 'link buttons', we've noticed that in Firefox for MacOS that 'link buttons' are not part of the default tabbable elements, whereas buttons using <button> markup are: https://github.com/alphagov/govuk-frontend/issues/1464

I have raised a bug for this on Firefox's bug tracker for them to consider: alphagov/reported-bugs#43

[edwardhorsford]

Sharing another example that's come up in our service.

Our page currently looks like this:

The links let admins re-invite users.

Because of technical reasons, these links (which are currently get requests) need to be made in to buttons.

Here's what it would look like with the secondary button style, which I don't think is as effective as the existing link style.