Tag

When To Use

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

Examples

<code src="./demo/basic.tsx">Basic</code> <code src="./demo/colorful.tsx">Colorful Tag</code> <code src="./demo/control.tsx">Add & Remove Dynamically</code> <code src="./demo/checkable.tsx">Checkable</code> <code src="./demo/animation.tsx">Animate</code> <code src="./demo/icon.tsx">Icon</code> <code src="./demo/status.tsx">Status Tag</code> <code src="./demo/customize.tsx" debug>Customize close</code> <code src="./demo/draggable.tsx">Draggable Tag</code> <code src="./demo/component-token.tsx" debug>Component Token</code> <code src="./demo/disabled.tsx" debug>Disabled</code> <code src="./demo/style-class.tsx" version="6.0.0">Custom semantic dom styling</code>

API

Common props ref：Common props

Property	Description	Type	Default	Version
classNames	Customize class for each semantic structure inside the component. Supports object or function.	Record<SemanticDOM, string> \| (info: { props })=> Record<SemanticDOM, string>	-
closeIcon	Custom close icon. 5.7.0: close button will be hidden when setting to `null` or `false`	ReactNode	false	4.4.0
color	Color of the Tag	string	-
disabled	Whether the tag is disabled	boolean	false	6.0.0
href	The address to jump when clicking, when this property is specified, the `tag` component will be rendered as an `<a>` tag	string	-	6.0.0
icon	Set the icon of tag	ReactNode	-
onClose	Callback executed when tag is closed (can be prevented by `e.preventDefault()`)	(e: React.MouseEvent<HTMLElement, MouseEvent>) => void	-
styles	Customize inline style for each semantic structure inside the component. Supports object or function.	Record<SemanticDOM, CSSProperties> \| (info: { props })=> Record<SemanticDOM, CSSProperties>	-
target	Same as target attribute of a, works when href is specified	string	-	6.0.0
variant	Variant of the tag	`'filled' \| 'solid' \| 'outlined'`	`'filled'`	6.0.0
~~bordered~~	Whether has border style, please use `variant="filled"` instead	boolean	true	-

Tag.CheckableTag

Property	Description	Type	Default	Version
checked	Checked status of Tag	boolean	false
icon	Set the icon of tag	ReactNode	-	5.27.0
onChange	Callback executed when Tag is checked/unchecked	(checked) => void	-

Tag.CheckableTagGroup

Property	Description	Type	Default
classNames	Customize class for each semantic structure inside the component. Supports object or function.	Record<SemanticDOM, string> \| (info: { props }) => Record<SemanticDOM, string>	-
defaultValue	Initial value	`string \| number \| Array<string \| number> \| null`	-
disabled	Disable check/uncheck	`boolean`	-
multiple	Multiple select mode	`boolean`	-
options	Option list	`Array<{ label: ReactNode; value: string \| number } \| string \| number>`	-
styles	Customize inline style for each semantic structure inside the component. Supports object or function.	Record<SemanticDOM, CSSProperties> \| (info: { props }) => Record<SemanticDOM, CSSProperties>	-
value	Value of checked tag(s)	`string \| number \| Array<string \| number> \| null`	-
onChange	Callback when Tag is checked/unchecked	`(value: string \| number \| Array<string \| number> \| null) => void`	-

Semantic DOM

Tag

Tag.CheckableTagGroup {#semantic-group}

Design Token