Tag

Used for marking and selection.

Basic usage

Use the type attribute to define Tag's type. In addition, the color attribute can be used to set the background color of the Tag.

Tag 1Tag 2Tag 3Tag 4Tag 5

export function TagBasic() {  return (    <div style={row}>      <ElTag type="primary">Tag 1</ElTag>      <ElTag type="success">Tag 2</ElTag>      <ElTag type="info">Tag 3</ElTag>      <ElTag type="warning">Tag 4</ElTag>      <ElTag type="danger">Tag 5</ElTag>    </div>  );}

Removable Tag

closable attribute can be used to define a removable tag. It accepts a Boolean. By default the removal of Tag has a fading animation. If you don't want to use it, you can set the disable-transitions attribute, which accepts a Boolean, to true. close event triggers when Tag is removed.

Tag 1Tag 2Tag 3Tag 4Tag 5

export function TagClosable() {  return (    <div style={row}>      <ElTag type="primary" closable>Tag 1</ElTag>      <ElTag type="success" closable>Tag 2</ElTag>      <ElTag type="info" closable>Tag 3</ElTag>      <ElTag type="warning" closable>Tag 4</ElTag>      <ElTag type="danger" closable>Tag 5</ElTag>    </div>  );}

Edit Dynamically

You can use the close event to add and remove tag dynamically.

Tag 1Tag 2Tag 3

export function TagClosableDynamic() {  const [tags, setTags] = useState(["Tag 1", "Tag 2", "Tag 3"]);  const [inputVisible, setInputVisible] = useState(false);  const [inputValue, setInputValue] = useState("");  const inputRef = useRef<InputExpose | null>(null);  useEffect(() => {    if (inputVisible) inputRef.current?.focus();  }, [inputVisible]);  const handleConfirm = () => {    if (inputValue) {      setTags((current) => [...current, inputValue]);    }    setInputVisible(false);    setInputValue("");  };  return (    <div style={row}>      {tags.map((tag) => (        <ElTag          key={tag}          closable          disableTransitions={false}          onClose={() => setTags((current) => current.filter((item) => item !== tag))}        >          {tag}        </ElTag>      ))}      {inputVisible ? (        <ElInput          ref={inputRef}          value={inputValue}          size="small"          style={{ width: "6.25rem" }}          onChange={(value) => setInputValue(value)}          onKeyDown={(event) => {            if (event.key === "Enter") handleConfirm();          }}          onBlur={handleConfirm}        />      ) : (        <ElButton size="small" onClick={() => setInputVisible(true)}>          + New Tag        </ElButton>      )}    </div>  );}

Sizes

Besides default size, Tag component provides three additional sizes for you to choose among different scenarios.

Use attribute size to set additional sizes with large, default or small.

LargeDefaultSmall

Theme

Tag provide three different themes: dark、light and plain

Using effect to change, default is light

DarkTag 1Tag 2Tag 3Tag 4Tag 5

LightTag 1Tag 2Tag 3Tag 4Tag 5

PlainTag 1Tag 2Tag 3Tag 4Tag 5

export function TagEffect() {  return (    <div style={column}>      <div style={row}>        <span>Dark</span>        <ElTag type="primary" effect="dark">Tag 1</ElTag>        <ElTag type="success" effect="dark">Tag 2</ElTag>        <ElTag type="info" effect="dark">Tag 3</ElTag>        <ElTag type="warning" effect="dark">Tag 4</ElTag>        <ElTag type="danger" effect="dark">Tag 5</ElTag>      </div>      <div style={row}>        <span>Light</span>        <ElTag type="primary" effect="light">Tag 1</ElTag>        <ElTag type="success" effect="light">Tag 2</ElTag>        <ElTag type="info" effect="light">Tag 3</ElTag>        <ElTag type="warning" effect="light">Tag 4</ElTag>        <ElTag type="danger" effect="light">Tag 5</ElTag>      </div>      <div style={row}>        <span>Plain</span>        <ElTag type="primary" effect="plain">Tag 1</ElTag>        <ElTag type="success" effect="plain">Tag 2</ElTag>        <ElTag type="info" effect="plain">Tag 3</ElTag>        <ElTag type="warning" effect="plain">Tag 4</ElTag>        <ElTag type="danger" effect="plain">Tag 5</ElTag>      </div>    </div>  );}

Rounded

Tag can also be rounded like button.

Tag 1Tag 2Tag 3Tag 4Tag 5

export function TagRound() {  return (    <div style={column}>      <div style={row}>        <ElTag type="primary" effect="dark" round>Tag 1</ElTag>        <ElTag type="success" effect="dark" round>Tag 2</ElTag>        <ElTag type="info" effect="dark" round>Tag 3</ElTag>        <ElTag type="warning" effect="dark" round>Tag 4</ElTag>        <ElTag type="danger" effect="dark" round>Tag 5</ElTag>      </div>      <div style={row}>        <ElTag type="primary" effect="light" round>Tag 1</ElTag>        <ElTag type="success" effect="light" round>Tag 2</ElTag>        <ElTag type="info" effect="light" round>Tag 3</ElTag>        <ElTag type="warning" effect="light" round>Tag 4</ElTag>        <ElTag type="danger" effect="light" round>Tag 5</ElTag>      </div>      <div style={row}>        <ElTag type="primary" effect="plain" round>Tag 1</ElTag>        <ElTag type="success" effect="plain" round>Tag 2</ElTag>        <ElTag type="info" effect="plain" round>Tag 3</ElTag>        <ElTag type="warning" effect="plain" round>Tag 4</ElTag>        <ElTag type="danger" effect="plain" round>Tag 5</ElTag>      </div>    </div>  );}

Checkable Tag

Sometimes because of the business needs, we might need checkbox like tag, but button like checkbox cannot meet our needs, here comes check-tag. You can use type prop in 2.5.4.

basic check-tag usage, the API is rather simple.

CheckedToggle meDisabled

Tag 1Tag 2Tag 3Tag 4Tag 5Tag 6

export function TagCheckable() {  const [checked, setChecked] = useState(false);  const [types, setTypes] = useState({    primary: true,    success: true,    info: true,    warning: true,    danger: true,    disabledSuccess: true,  });  return (    <div style={column}>      <div style={row}>        <ElCheckTag checked>Checked</ElCheckTag>        <ElCheckTag checked={checked} onCheckedChange={setChecked}>          Toggle me        </ElCheckTag>        <ElCheckTag disabled>Disabled</ElCheckTag>      </div>      <div style={row}>        {(["primary", "success", "info", "warning", "danger"] as const).map(          (type, index) => (            <ElCheckTag              key={type}              type={type}              checked={types[type]}              onCheckedChange={(next) =>                setTypes((current) => ({ ...current, [type]: next }))              }            >              Tag {index + 1}            </ElCheckTag>          ),        )}        <ElCheckTag          type="success"          disabled          checked={types.disabledSuccess}          onCheckedChange={(next) =>            setTypes((current) => ({ ...current, disabledSuccess: next }))          }        >          Tag 6        </ElCheckTag>      </div>    </div>  );}

Tag API

Tag Attributes

Name	Description	Type	Default
type	type of Tag	`enum`	primary
closable	whether Tag can be removed	`boolean`	false
disable-transitions	whether to disable animations	`boolean`	false
hit	whether Tag has a highlighted border	`boolean`	false
color	background color of the Tag	`string`	—
size	size of Tag	`enum`	—
effect	theme of Tag	`enum`	light
round	whether Tag is rounded	`boolean`	false

Tag Events

Name	Description	Type
click	triggers when Tag is clicked	`Function`
close	triggers when Tag is removed	`Function`

Tag Slots

Name	Description
default	customize default content

CheckTag API

CheckTag Attributes

Name	Description	Type	Default
checked / v-model:checked	is checked	`boolean`	false
disabled 2.8.2	whether the check-tag is disabled	`boolean`	false
type 2.5.4	type of CheckTag	`enum`	primary

CheckTag Events

Name	Description	Type
change	triggers when Check Tag is clicked	`Function`

CheckTag Slots

Name	Description
default	customize default content