Tag for categorizing or markup.
It can be used to tag by dimension or property.
When categorizing.
Usage of basic Tag, and it could be closable by set closable property. Closable Tag supports onClose events.
import React from 'react';
import { Space, Tag } from 'antd';
const log = (e: React.MouseEvent<HTMLElement>) => {
console.log(e);
};
const preventDefault = (e: React.MouseEvent<HTMLElement>) => {
e.preventDefault();
console.log('Clicked! But prevent default.');
};
const App: React.FC = () => (
<Space size={[0, 8]} wrap>
<Tag>Tag 1</Tag>
<Tag>
<a href="https://github.com/ant-design/ant-design/issues/1862">Link</a>
</Tag>
<Tag closable onClose={log}>
Tag 2
</Tag>
<Tag closable onClose={preventDefault}>
Prevent Default
</Tag>
</Space>
);
export default App;
Generating a set of Tags by array, you can add and remove dynamically.
import React, { useEffect, useRef, useState } from 'react';
import { PlusOutlined } from '@ant-design/icons';
import type { InputRef } from 'antd';
import { Space, Input, Tag, Tooltip, theme } from 'antd';
const App: React.FC = () => {
const { token } = theme.useToken();
const [tags, setTags] = useState(['Unremovable', 'Tag 2', 'Tag 3']);
const [inputVisible, setInputVisible] = useState(false);
const [inputValue, setInputValue] = useState('');
const [editInputIndex, setEditInputIndex] = useState(-1);
const [editInputValue, setEditInputValue] = useState('');
const inputRef = useRef<InputRef>(null);
const editInputRef = useRef<InputRef>(null);
useEffect(() => {
if (inputVisible) {
inputRef.current?.focus();
}
}, [inputVisible]);
useEffect(() => {
editInputRef.current?.focus();
}, [inputValue]);
const handleClose = (removedTag: string) => {
const newTags = tags.filter((tag) => tag !== removedTag);
console.log(newTags);
setTags(newTags);
};
const showInput = () => {
setInputVisible(true);
};
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setInputValue(e.target.value);
};
const handleInputConfirm = () => {
if (inputValue && tags.indexOf(inputValue) === -1) {
setTags([...tags, inputValue]);
}
setInputVisible(false);
setInputValue('');
};
const handleEditInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setEditInputValue(e.target.value);
};
const handleEditInputConfirm = () => {
const newTags = [...tags];
newTags[editInputIndex] = editInputValue;
setTags(newTags);
setEditInputIndex(-1);
setInputValue('');
};
const tagInputStyle: React.CSSProperties = {
width: 78,
verticalAlign: 'top',
};
const tagPlusStyle: React.CSSProperties = {
background: token.colorBgContainer,
borderStyle: 'dashed',
};
return (
<Space size={[0, 8]} wrap>
<Space size={[0, 8]} wrap>
{tags.map((tag, index) => {
if (editInputIndex === index) {
return (
<Input
ref={editInputRef}
key={tag}
size="small"
style={tagInputStyle}
value={editInputValue}
onChange={handleEditInputChange}
onBlur={handleEditInputConfirm}
onPressEnter={handleEditInputConfirm}
/>
);
}
const isLongTag = tag.length > 20;
const tagElem = (
<Tag
key={tag}
closable={index !== 0}
style={{ userSelect: 'none' }}
onClose={() => handleClose(tag)}
>
<span
onDoubleClick={(e) => {
if (index !== 0) {
setEditInputIndex(index);
setEditInputValue(tag);
e.preventDefault();
}
}}
>
{isLongTag ? `${tag.slice(0, 20)}...` : tag}
</span>
</Tag>
);
return isLongTag ? (
<Tooltip title={tag} key={tag}>
{tagElem}
</Tooltip>
) : (
tagElem
);
})}
</Space>
{inputVisible ? (
<Input
ref={inputRef}
type="text"
size="small"
style={tagInputStyle}
value={inputValue}
onChange={handleInputChange}
onBlur={handleInputConfirm}
onPressEnter={handleInputConfirm}
/>
) : (
<Tag style={tagPlusStyle} onClick={showInput}>
<PlusOutlined /> New Tag
</Tag>
)}
</Space>
);
};
export default App;
Animating the Tag by using rc-tween-one.
import React, { useEffect, useRef, useState } from 'react';
import { PlusOutlined } from '@ant-design/icons';
import type { InputRef } from 'antd';
import { Input, Tag, theme } from 'antd';
import { TweenOneGroup } from 'rc-tween-one';
const App: React.FC = () => {
const { token } = theme.useToken();
const [tags, setTags] = useState(['Tag 1', 'Tag 2', 'Tag 3']);
const [inputVisible, setInputVisible] = useState(false);
const [inputValue, setInputValue] = useState('');
const inputRef = useRef<InputRef>(null);
useEffect(() => {
if (inputVisible) {
inputRef.current?.focus();
}
}, [inputVisible]);
const handleClose = (removedTag: string) => {
const newTags = tags.filter((tag) => tag !== removedTag);
console.log(newTags);
setTags(newTags);
};
const showInput = () => {
setInputVisible(true);
};
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setInputValue(e.target.value);
};
const handleInputConfirm = () => {
if (inputValue && tags.indexOf(inputValue) === -1) {
setTags([...tags, inputValue]);
}
setInputVisible(false);
setInputValue('');
};
const forMap = (tag: string) => {
const tagElem = (
<Tag
closable
onClose={(e) => {
e.preventDefault();
handleClose(tag);
}}
>
{tag}
</Tag>
);
return (
<span key={tag} style={{ display: 'inline-block' }}>
{tagElem}
</span>
);
};
const tagChild = tags.map(forMap);
const tagPlusStyle = {
background: token.colorBgContainer,
borderStyle: 'dashed',
};
return (
<>
<div style={{ marginBottom: 16 }}>
<TweenOneGroup
enter={{
scale: 0.8,
opacity: 0,
type: 'from',
duration: 100,
}}
onEnd={(e) => {
if (e.type === 'appear' || e.type === 'enter') {
(e.target as any).style = 'display: inline-block';
}
}}
leave={{ opacity: 0, width: 0, scale: 0, duration: 200 }}
appear={false}
>
{tagChild}
</TweenOneGroup>
</div>
{inputVisible ? (
<Input
ref={inputRef}
type="text"
size="small"
style={{ width: 78 }}
value={inputValue}
onChange={handleInputChange}
onBlur={handleInputConfirm}
onPressEnter={handleInputConfirm}
/>
) : (
<Tag onClick={showInput} style={tagPlusStyle}>
<PlusOutlined /> New Tag
</Tag>
)}
</>
);
};
export default App;
We preset five different colors, you can set color property such as success,processing,error,default and warning to indicate specific status.
import React from 'react';
import {
CheckCircleOutlined,
ClockCircleOutlined,
CloseCircleOutlined,
ExclamationCircleOutlined,
MinusCircleOutlined,
SyncOutlined,
} from '@ant-design/icons';
import { Divider, Space, Tag } from 'antd';
const App: React.FC = () => (
<>
<Divider orientation="left">Without icon</Divider>
<Space size={[0, 8]} wrap>
<Tag color="success">success</Tag>
<Tag color="processing">processing</Tag>
<Tag color="error">error</Tag>
<Tag color="warning">warning</Tag>
<Tag color="default">default</Tag>
</Space>
<Divider orientation="left">With icon</Divider>
<Space size={[0, 8]} wrap>
<Tag icon={<CheckCircleOutlined />} color="success">
success
</Tag>
<Tag icon={<SyncOutlined spin />} color="processing">
processing
</Tag>
<Tag icon={<CloseCircleOutlined />} color="error">
error
</Tag>
<Tag icon={<ExclamationCircleOutlined />} color="warning">
warning
</Tag>
<Tag icon={<ClockCircleOutlined />} color="default">
waiting
</Tag>
<Tag icon={<MinusCircleOutlined />} color="default">
stop
</Tag>
</Space>
</>
);
export default App;
We preset a series of colorful tag styles for use in different situations. You can also set it to a hex color string for custom color.
import React from 'react';
import { Divider, Space, Tag } from 'antd';
const App: React.FC = () => (
<>
<Divider orientation="left">Presets</Divider>
<Space size={[0, 8]} wrap>
<Tag color="magenta">magenta</Tag>
<Tag color="red">red</Tag>
<Tag color="volcano">volcano</Tag>
<Tag color="orange">orange</Tag>
<Tag color="gold">gold</Tag>
<Tag color="lime">lime</Tag>
<Tag color="green">green</Tag>
<Tag color="cyan">cyan</Tag>
<Tag color="blue">blue</Tag>
<Tag color="geekblue">geekblue</Tag>
<Tag color="purple">purple</Tag>
</Space>
<Divider orientation="left">Custom</Divider>
<Space size={[0, 8]} wrap>
<Tag color="#f50">#f50</Tag>
<Tag color="#2db7f5">#2db7f5</Tag>
<Tag color="#87d068">#87d068</Tag>
<Tag color="#108ee9">#108ee9</Tag>
</Space>
</>
);
export default App;
CheckableTag works like Checkbox, click it to toggle checked state.
it is an absolute controlled component and has no uncontrolled mode.
import React, { useState } from 'react';
import { Space, Tag } from 'antd';
const { CheckableTag } = Tag;
const tagsData = ['Movies', 'Books', 'Music', 'Sports'];
const App: React.FC = () => {
const [selectedTags, setSelectedTags] = useState<string[]>(['Books']);
const handleChange = (tag: string, checked: boolean) => {
const nextSelectedTags = checked
? [...selectedTags, tag]
: selectedTags.filter((t) => t !== tag);
console.log('You are interested in: ', nextSelectedTags);
setSelectedTags(nextSelectedTags);
};
return (
<>
<span style={{ marginRight: 8 }}>Categories:</span>
<Space size={[0, 8]} wrap>
{tagsData.map((tag) => (
<CheckableTag
key={tag}
checked={selectedTags.includes(tag)}
onChange={(checked) => handleChange(tag, checked)}
>
{tag}
</CheckableTag>
))}
</Space>
</>
);
};
export default App;
Tag components can contain an Icon. This is done by setting the icon property or placing an Icon component within the Tag.
If you want specific control over the positioning and placement of the Icon, then that should be done by placing the Icon component within the Tag rather than using the icon property.
import React from 'react';
import {
FacebookOutlined,
LinkedinOutlined,
TwitterOutlined,
YoutubeOutlined,
} from '@ant-design/icons';
import { Space, Tag } from 'antd';
const App: React.FC = () => (
<Space size={[0, 8]} wrap>
<Tag icon={<TwitterOutlined />} color="#55acee">
Twitter
</Tag>
<Tag icon={<YoutubeOutlined />} color="#cd201f">
Youtube
</Tag>
<Tag icon={<FacebookOutlined />} color="#3b5999">
Facebook
</Tag>
<Tag icon={<LinkedinOutlined />} color="#55acee">
LinkedIn
</Tag>
</Space>
);
export default App;
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| closable | Whether the Tag can be closed | boolean | false | |
| closeIcon | Custom close icon | ReactNode | - | 4.4.0 |
| color | Color of the Tag | string | - | |
| icon | Set the icon of tag | ReactNode | - | |
| onClose | Callback executed when tag is closed | (e) => void | - |
| Property | Description | Type | Default |
|---|---|---|---|
| checked | Checked status of Tag | boolean | false |
| onChange | Callback executed when Tag is checked/unchecked | (checked) => void | - |