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 | 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 |
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 'intergalactic/tag';
<Tag.Addon />;import Tag from 'intergalactic/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 'intergalactic/tag';
<Tag.Text />;import Tag from 'intergalactic/tag';
<Tag.Text />;Tag.Close
Cross icon automatically adjusts to the selected theme and size.
It accepts all Box properties.
jsx
import Tag from 'intergalactic/tag';
<Tag.Close />;import Tag from 'intergalactic/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 'intergalactic/tag';
<Tag.Circle />;import Tag from 'intergalactic/tag';
<Tag.Circle />;