Developer Tag
TagProps
& {...}| Name | Type | Description |
|---|---|---|
| disabled | boolean | Value responsible for tag availability |
| active | boolean | Value responsible for tag activity |
| interactive | boolean | Interactive tag |
| use | 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 |
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.
jsx
import Tag from '@semcore/ui/tag';
<Tag.Addon />;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.
jsx
import Tag from '@semcore/ui/tag';
<Tag.Text />;import Tag from '@semcore/ui/tag';
<Tag.Text />;Tag.Close
Cross icon automatically adjusts to the selected theme and size.
It accepts all Box properties.
jsx
import Tag from '@semcore/ui/tag';
<Tag.Close />;import Tag from '@semcore/ui/tag';
<Tag.Close />;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.
jsx
import Tag from '@semcore/ui/tag';
<Tag.Circle />;import Tag from '@semcore/ui/tag';
<Tag.Circle />;