This component is displayed as an accessible tag with an optional link and/or button to remove it.
Although the ak-tag
component can be used by itself, it works best in conjunction with the
ak-tag-group
component.
Interact with a live demo of the ak-tag component with code examples.
npm install ak-tag --save
The ak-tag
package exports the Tag React component.
import ReactDOM from 'react-dom';
import Tag from 'ak-tag';
ReactDOM.render(
<Tag
text="Jelly bean"
removeButtonText="Come join us!"
/>,
document.getElementById('root')
);
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
-
tag.text :
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);
(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'
(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);
(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
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/
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);
Let us know what you think of our components and docs, your feedback is really important for us.
Ask a question in our forum.
Check if someone has already asked the same question before.
Are you in trouble? Let us know!