dta.gov.au

The .gov.au means it’s official

Australian government websites always use a .gov.au domain. Before sharing sensitive information online, make sure you’re on a .gov.au site by inspecting your browser’s address (or 'location') bar.

This site is secure.

The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.

Tags

v4.0.0

Tags are a means of classifying content, typically using keywords or labels. They are added to a web page, an asset or other content to help users search for and find related content quickly and easily.

Released

History
View changes
Install
npm i @gov.au/tags
Tags
Requires
Contributors
  • Dominik Wilkowski avatar picture
  • Hannah J. Nicdao avatar picture
  • Trevor Brennan avatar picture
  • Alex Page avatar picture
  • Petra Gulicher avatar picture
  • Alexander Sadleir avatar picture
  • Julian Fleetwood avatar picture
  • Simon Pascal Klein avatar picture
  • Patrick De Young avatar picture
  • Gary Broadbent avatar picture

A list of related tags that use links.

Note: An appropriate heading level should be used to introduce the purpose of the list.

Example

<!--
  Light:  <span class="au-tag">
  Dark:   <span class="au-tag au-tag--dark">
-->

<h2>Tags:</h2>
<ul class="au-tag-list">
  <li><a href="#" class="au-tag">foo</a></li>
  <li><a href="#" class="au-tag">bar</a></li>
  <li><a href="#" class="au-tag">baz</a></li>
</ul>
/*
  Light:  <AUtagList tags={[
  Dark:   <AUtagList dark tags={[
*/

import AUtagList, {AUtag} from '@gov.au/tags';

<AUtagList tags={[
  {
    link: '#',
    text: 'foo',
  },
  {
    link: '#',
    text: 'bar',
  },
  {
    link: '#',
    text: 'baz',
    className: ''
    attributeOptions: {
      onClick: () => {console.log('clicked')},
    }
  },
]} />

A list of related tags without links.

Example

<!--
  Light:  <span class="au-tag">
  Dark:   <span class="au-tag au-tag--dark">
-->

<h2>Tags:</h2>
<ul class="au-tag-list">
  <li><span class="au-tag au-tag--dark">foo</span></li>
  <li><span class="au-tag au-tag--dark">bar</span></li>
  <li><span class="au-tag au-tag--dark">baz</span></li>
</ul>
/*
  Light:  <AUtagList tags={[
  Dark:   <AUtagList dark tags={[
*/

import AUtagList, {AUtag} from '@gov.au/tags';

<AUtagList tags={[
  {
    text: 'foo',
  },
  {
    text: 'bar',
  },
  {
    text: 'baz',
  },
]} />