The Australian Government coat of Arms

Communities of practice

Communities of practice

Tags


#1

Please provide any feedback for the Tags component.

You can also view the component page on our documentation site for the Tags component.


#2

Note: Tags using definition list will be deprecated.

Multiple sources have agreed that the use of <DL> (Definition Lists) to render the list of tags is not ideal for accessibility.

Ref: https://github.com/govau/uikit/issues/367


#3

Would it be possible to get an inline variation?

Currently the margin top on the li elements mean that it is tricky to align vertically with a label
tags-inline


#4

This seems like a reasonable request! I am still going to look into the accordion performance aswell it’s just lower on the priorities right now. Thanks @roflcopterDorrie


#5

Hey guys,

I used some tags without links from the design system in a roadmap design (part of the roadmap concept attached) I worked on and most people I tested on actually wanted to click on the tags even though they weren’t links.

Tags are usually clickable, so it’s tricky to remove that affordance. I think that removing the blue border colour from the tags without links could help decrease their affordance. Blue is generally an action colour, using a more neutral grey might help. I didn’t get a chance to test this as we ended up removing tags from the roadmap but I think it’s a pretty safe option to try.

In addition to the border colour change, I think that fully rounding the corners of the tags could help differentiate them from buttons. In my experience, it’s more common for tags/pills to have fully rounded corners.

Hope that helps :slight_smile:

Roadmap concept I tested:


#6

Here’s a quick mock up of the suggested new tags style with no links to decrease the affordance:
new-tags-no-link


#7

@adhamdannaway Great feedback, I completely agree that the tags which are not links look interactive currently. This is quite misleading.

I think we lean stronger towards obviousness on the appearance of interactiveness and this is probably caused due to the closeness of the two variations.

Based on what you are saying above, it would make sense to:

  • Interactive tags have the interactive text colour and borders ( no underline )
  • Non-interactive tags use the border colour for borders and text colour for text

#8

No worries :slight_smile:

Tags with links:
blue border, blue text colour, no underline, underline on hover to be consistent with buttons.

Tags without links:
grey/black border, grey/black text, no hover state.

Also increase border-radius to 13px for all tags to differentiate them from buttons. Otherwise they look like small buttons which can cause user confusion (as tags have a different meaning to buttons)


#9

Sounds great @adhamdannaway thanks for the feedback, super useful!