Tags

v5.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 @gold.au/tags
Tags
Requires
Contributors
  • Trevor Brennan avatar picture
  • Petra Gulicher avatar picture
  • Alexander Sadleir avatar picture
  • Alex Page avatar picture
  • Patrick De Young avatar picture
  • Dominik Wilkowski avatar picture
  • Julian Fleetwood avatar picture
  • Simon Pascal Klein avatar picture
  • Hannah J. Nicdao avatar picture
  • Gary Broadbent avatar picture

React Usage

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

{/* Single tag component */}
<AUtag text="Single tag" />
<AUtag text="Single tag anchor" link="#" />


{/* Tag list component */}
<AUtagList dark tags={[
        {
            link: '#url',
            text: 'foo',
        },
        {
            link: '#url',
            text: 'bar',
            //attribute options on the tag
            attributeOptions: {
                role: "link",
                className: "extra class",
                onClick: event => { event.preventDefault(); console.log('This function is called when the tag is clicked') },
            },
            // attribute options on the li element
            li: {
                className: 'li-wrapping-class',
            }
        },
        {
            link: '#url',
            text: 'baz',
        },
        {
            //non-link tag
            text: 'boing',
        },
]} />

Props

AUtagList

Prop name Type Description
dark boolean A dark variation of the component
tags array All tags inside a neat array
tags[0].link string The href link of this tag
tags[0].linkComponent string The component used for the link, optional
tags[0].text string The text of the tag
tags[0].li object An object that will be spread onto the <li> tag
tags[0].attributeOptions object An object that will be spread onto the AUtag

All other props are spread into the component

AUtag

Prop name Type Description
dark boolean A dark variation of the component
link string The link for this tag, optional
text string The text for the tag
linkComponent string The component used for the link, optional

Exports

Name Type Description
AUtag named A single tag
AUtagList default The tag list component

node_modules import

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

pancake import

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

Related components

Feedback