@atlaskit/tag

Tag

This component is displayed as an accessible tag with an optional link and/or button to remove it.

Although the tag component can be used by itself, it works best in conjunction with the @atlskit/tag-group component.

Try it out

Interact with a live demo of the @atlaskit/tag component with code examples.

Installation

npm install @atlaskit/tag

Using the component

The tag package exports the Tag React component.

import ReactDOM from 'react-dom';
import Tag from '@atlaskit/tag';
ReactDOM.render(
  <Tag
    text="Jelly bean"
    removeButtonText="Come join us!"
  />,
  document.getElementById('root')
);

Tag

Kind: global class Emits: Tag#event:onBeforeRemoveAction, Tag#event:onAfterRemoveAction

• Properties

  • tag.text : string
  • tag.href : string
  • tag.removeButtonText : string
  • tag.onBeforeRemoveAction : function
  • tag.onAfterRemoveAction : function

new Tag()

Create instances of the component programmatically, or using markup.

JS Example

import Tag from 'ak-tag';
// Tag with text
ReactDOM.render(<Tag text="Cupcake" />, container);
// Tag with link
ReactDOM.render(<Tag text="Atlassian" href="https://www.atlassian.com"/>, container);
// Tag with link that is removable
ReactDOM.render(<Tag text="Atlassian"
                     href="https://www.atlassian.com"
                     removeButtonText="Remove Me"/>, container);

tag.appearance : string

Allowed values: "default", "rounded".

Rounded is recommended only for use with Avatars in elemBefore

Kind: instance property of Tag JS Example

ReactDOM.render(<Tag
  text="Cupcake"
  elemBefore={<Avatar size="xsmall" />}
  appearance="rounded"
/>, container);

tag.text : string

(Required) The tag text content. This is a required attribute. Omitting it will stop the tag from being rendered. The text passed will be sanitized, e.g. passed HTML will be represented as plain text.

Kind: instance property of Tag JS Example

ReactDOM.render(<Tag text="Cupcake" />, container);
// Shows a tag with the text 'Cupcake'

tag.href : string

(Optional) A target href for the tag text to link to. If this attribute is non-empty, the tag will contain a link to the given URL. The given URL reference will be used as-is and will open in the same window. This attribute implicitly controls Tag#isLinked.

Kind: instance property of Tag JS Example

import Tag from 'ak-tag';
// Shows a tag with the text 'Cupcake'
// and a link to cupcakeipsum.com
ReactDOM.render(<Tag text="Cupcake" href="http://www.cupcakeipsum.com/"/>, container);

tag.removeButtonText : string

(Optional) The text for the remove button tooltip. Implicitly defines that there will be a remove button. This attribute implicitly controls Tag#isRemovable.

Kind: instance property of Tag JS Example

import Tag from 'ak-tag';
ReactDOM.render(<Tag text='Cupcake' href='http://www.cupcakeipsum.com/' removeButtonText = 'OMG, I am so full!'/>, container);
Shows a tag with the text 'Cupcake' with the link and a remove button

tag.onBeforeRemoveAction : function

This handler is called before a Tag gets removed (e.g. before the remove animation starts). It is cancelable by returning boolean false.

Kind: instance property of Tag JS Example

ReactDOM.render(
  <Tag
    text="Cupcake"
    onBeforeRemoveAction={(e) => false}
  />,
container);
// the Tag won't be removed \o/

tag.onAfterRemoveAction : function

This handler is called after a Tag has been removed (e.g. after the remove animation finishes). It is not cancelable.

Kind: instance property of Tag JS Example

ReactDOM.render(
  <Tag
    text="Cupcake"
    onAfterRemoveAction={(e) => { console.log('Tag removed!'); }}
  />,
container);

* Please note that this module could have dependencies that are governed by the Atlassian Design Guidelines license which will be automatically included on install. Each dependency has a license file that indicates whether the Atlassian Design Guidelines license applies.

We're here to help!

Let us know what you think of our components and docs, your feedback is really important for us.

Are you in trouble? Read through our contribution guidelines and raise an issue to us.