Tag

Tag for categorizing or markup.

When To Use

It can be used to tag by dimension or property.
When categorizing.

Examples

Usage of basic Tag, and it could be closable by set closable property. Closable Tag supports onClose events.

TypeScript
JavaScript
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;

Add & Remove Dynamically

Generating a set of Tags by array, you can add and remove dynamically.

TypeScript
JavaScript
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;

Animate

Animating the Tag by using rc-tween-one.

TypeScript
JavaScript
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();
    }
  }, []);

  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;

Status Tag

We preset five different colors, you can set color property such as success,processing,error,default and warning to indicate specific status.

TypeScript
JavaScript
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;

Colorful Tag

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.

TypeScript
JavaScript
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;

Checkable

CheckableTag works like Checkbox, click it to toggle checked state.

it is an absolute controlled component and has no uncontrolled mode.

TypeScript
JavaScript
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;

Icon

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.

TypeScript
JavaScript
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;

API

Tag

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	-

Tag.CheckableTag

Property	Description	Type	Default
checked	Checked status of Tag	boolean	false
onChange	Callback executed when Tag is checked/unchecked	(checked) => void	-

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;

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;

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(); } }, []); 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;

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;

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;

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;

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;

API

Tag

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	-

Tag.CheckableTag

Property	Description	Type	Default
checked	Checked status of Tag	boolean	false
onChange	Callback executed when Tag is checked/unchecked	(checked) => void	-

Ant Design

Tag

Ant Design

Tag

When To Use

Examples

API

Tag

Tag.CheckableTag

When To Use

Examples

API

Tag

Tag.CheckableTag