Tag

Used for marking and categorization.

When to use

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

Examples

Basic

Usage of basic Tag, and it could be closable and customize close button by set closeIcon property, will display default close button when closeIcon is setting to true. Closable Tag supports onClose events.

Add & Remove Dynamically

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

Animate

Animating the Tag by using motion.

Status Tag

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

Custom semantic dom styling

You can customize the semantic dom style of Tag by passing objects/functions through classNames and styles.

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.

Checkable

CheckableTag works like Checkbox, click it to toggle checked state. CheckableTagGroup provides function that is similar to CheckboxGroup or RadioGroup. > CheckableTag is absolute controlled component and has no uncontrolled mode.

Icon

You can add a custom icon to the tag via the icon prop. Note that the icon prop for CheckableTag is only supported in version >=5.27.0. If you need to control the icon position, please use the <XXXIcon /> component directly in children instead of the icon prop. icon also accepts a bare <svg> element from a third-party icon library. It stays vertically centred with the label whether it is sized in em or in px.

Draggable Tag

Draggable tags using dnd kit.

API

Tag and Tag.CheckableTag are exported from @ceebee/ui/client.

Tag

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`	`default when variant="solid"`	solid default color: 6.4.0
`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	Version
`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. Object options support per-item className and style.	`Array<{ className?: string; label: ReactNode; style?: CSSProperties; value: string \| number } \| string \| number>`	`-`	className and style: 6.4.0
`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`	`-`	—