Tag, TagContainer

TagContainer is necessary for the correct appearance and behavior of the Delete tag button.

TagProps

& & {...}

Name	Type	Description
disabled	boolean	Value responsible for tag availability
active	boolean	Value responsible for tag activity
interactive	boolean	Interactive tag
use		Deprecated Tag type
theme		Tag theme, there are several default themes or you can use your color
color	string	Tag color text
size		Tag size
addonLeft	React.ElementType	Left addon tag
addonRight	React.ElementType	Right addon tag
locale	string

TagContainer.Close

Delete tag button automatically adjusts to the selected theme and size.

Accepts all Box properties.

import { TagContainer } from '@semcore/ui/tag';
<TagContainer.Close />;

Tag.Addon

The addon inside the tag (most commonly an icon) sets the correct indents depending on the size.

It takes all the properties of the Box.

import Tag from '@semcore/ui/tag';
<Tag.Addon />;

Tag.Text

This ordinary text sets the appropriate indents depending on the size. If a simple text without addons is used in the Tag, it will turn into Tag.Text automatically.

It takes all the properties of the Box.

import Tag from '@semcore/ui/tag';
<Tag.Text />;

Tag.Circle

A special addon for round elements inside a tag (most often a picture) places the correct indents depending on the size.

It accepts all Box properties.

import Tag from '@semcore/ui/tag';
<Tag.Circle />;