@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 reccomended 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);

Support and feedback

We're here to help!

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

Community support

Ask a question in our forum.

Check if someone has already asked the same question before.

Create a support ticket

Are you in trouble? Let us know!