Tag - Vant 4

Tag

Intro

Used to mark keywords and summarize the main content.

Install

Register component globally via app.use, refer to Component Registration for more registration ways.

import { createApp } from'vue'; import { Tag } from'vant'; const app = createApp(); app.use(Tag);

Usage

Basic Usage

Plain style

Round style

Mark style

Closeable

import { ref } from'vue'; exportdefault { setup() { const show = ref(true); constclose = () => { show.value = false; }; return { show, close, }; }, };

Custom Size

Custom Color

API

Props

Attribute	Description	Type	Default
type	Type, can be set to primary``success``danger``warning	string	default
size	Size, can be set to large``medium	string	-
color	Custom color	string	-
show	Whether to show tag	boolean	true
plain	Whether to be plain style	boolean	false
round	Whether to be round style	boolean	false
mark	Whether to be mark style	boolean	false
text-color	Text color	string	white
closeable	Whether to be closeable	boolean	false

Slots

Name	Description
default	Default slot

Events

Event	Description	Arguments
click	Emitted when component is clicked	event: MouseEvent
close	Emitted when close icon is clicked	event: MouseEvent

Types

The component exports the following type definitions:

importtype { TagSize, TagType, TagProps } from'vant';

Theming

CSS Variables

The component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.

Name	Default Value	Description
--van-tag-padding	0 var(--van-padding-base)	-
--van-tag-text-color	var(--van-white)	-
--van-tag-font-size	var(--van-font-size-sm)	-
--van-tag-radius	2px	-
--van-tag-line-height	16px	-
--van-tag-medium-padding	2px 6px	-
--van-tag-large-padding	var(--van-padding-base) var(--van-padding-xs)	-
--van-tag-large-radius	var(--van-radius-md)	-
--van-tag-large-font-size	var(--van-font-size-md)	-
--van-tag-round-radius	var(--van-radius-max)	-
--van-tag-danger-color	var(--van-danger-color)	-
--van-tag-primary-color	var(--van-primary-color)	-
--van-tag-success-color	var(--van-success-color)	-
--van-tag-warning-color	var(--van-warning-color)	-
--van-tag-default-color	var(--van-gray-6)	-
--van-tag-plain-background	var(--van-background-2)	-