Tags

A tag is an interactive element similar to a button. Tags contains a keyword or phrase that helps categorises your content.

Clicking on a tag takes the user to a list page of all items tagged with that keyword or phrase. Tags can also be used to filter content on a page.

//Link tag
<a href="#" class="nsw-tag">Link</a>

//Text tag
<span class="nsw-tag">Text</span>

//Checkbox tag
<div class="nsw-tag nsw-tag--checkbox">
    <input type="checkbox" id="skljhs789js" name="tagInput">
    <label for="skljhs789js">Checkbox</label>
</div>

 

Copy

Tags are designed to look button-like, but are visually distinct from regular buttons.

They are designed to help classify content using keywords or phrases.

Tags help users search for and find related content quickly and easily. 

Each tag links users to a listing of all the content, or filters content, with that specific keyword or phrase. 

Use tags to: 

  • categorise content
  • link to related content 
  • filter results 

Users often confuse tags as buttons. Conduct user testing to make sure the way you use them is not causing confusion.