Tag
Tag addon
You can add addons to the Tag component in two ways: by passing the desired tag to the addonLeft
or addonRight
property, or by directly rendering Tag.Addon
or Tag.Text
within the component.
import React from 'react';
import Tag from '@semcore/tag';
import { Flex } from '@semcore/flex-box';
import SmileHappyM from '@semcore/icon/SmileHappy/m';
import SmileSadM from '@semcore/icon/SmileSad/m';
const Demo = () => {
return (
<Flex gap={1}>
<Tag size='l' addonLeft={SmileHappyM}>
Positive
</Tag>
<Tag size='l'>
<Tag.Addon>
<SmileSadM />
</Tag.Addon>
<Tag.Text>Negative</Tag.Text>
</Tag>
</Flex>
);
};
export default Demo;
Custom color
You can set custom color to the tag using color
property.
TIP
We recommend to use colors with 500 tone from our palette tokens, since they have the necessary contrast between the text and background. Background color for all states and color for icon inside the tag is calculated with CSS filter.
import React from 'react';
import Tag from '@semcore/tag';
import SmileHappyM from '@semcore/icon/SmileHappy/m';
const Demo = () => {
return (
<Tag color='violet-500' size='l' addonLeft={SmileHappyM}>
Positive
</Tag>
);
};
export default Demo;
Grouping tags
If you need to render several tags, combine them into a group with a meaningful accessible name.
Less than 5 tags
If the number of tags is less than 5, add role="group"
to the parent element.
import React from 'react';
import Tag from '@semcore/tag';
import { Flex } from '@semcore/flex-box';
const Demo = () => {
return (
<Flex role={'group'} aria-label={'Social media'} gap={1}>
<Tag size={'l'}>Instagram</Tag>
<Tag size={'l'}>Facebook</Tag>
<Tag size={'l'}>LinkedIn</Tag>
</Flex>
);
};
export default Demo;
5 tags or more
If the number of tags is 5 or more, wrap them in a ul
list, with each Tag
as a li
element.
- Yahoo
- Bing
- Ask.com
- WolframAlpha
import React from 'react';
import Tag from '@semcore/tag';
import { Flex } from '@semcore/flex-box';
const Demo = () => {
return (
<Flex tag={'ul'} aria-label={'Search engines'} gap={1}>
<Tag tag={'li'} size={'l'}>
Google
</Tag>
<Tag tag={'li'} size={'l'}>
Yahoo
</Tag>
<Tag tag={'li'} size={'l'}>
Bing
</Tag>
<Tag tag={'li'} size={'l'}>
Ask.com
</Tag>
<Tag tag={'li'} size={'l'}>
WolframAlpha
</Tag>
</Flex>
);
};
export default Demo;
Adding tag
import React from 'react';
import Tag from '@semcore/tag';
import MathPlusM from '@semcore/icon/MathPlus/m';
const Demo = () => {
return (
<Tag interactive size='l' theme='additional' onClick={console.log}>
<Tag.Addon>
<MathPlusM />
</Tag.Addon>
<Tag.Text>Add tag</Tag.Text>
</Tag>
);
};
export default Demo;
Editing tag
Use InlineEdit for this case.
import React from 'react';
import InlineInput from '@semcore/inline-input';
import InlineEdit from '@semcore/inline-edit';
import Tag from '@semcore/tag';
const Demo = () => {
const [value, setValue] = React.useState('Default tag');
const [editable, setEditable] = React.useState(false);
const handleValue = (value: string) => {
setEditable(false);
setValue(value);
};
const resetEditable = () => setEditable(false);
return (
<>
<InlineEdit editable={editable} onEditableChange={setEditable}>
<InlineEdit.View pr={2} tag={Tag} interactive size='l'>
<Tag.Text>{value}</Tag.Text>
</InlineEdit.View>
<InlineEdit.Edit>
<InlineInput onConfirm={handleValue} onCancel={resetEditable}>
<InlineInput.Value defaultValue={value} autoFocus aria-label='Tag name' />
<InlineInput.ConfirmControl />
<InlineInput.CancelControl />
</InlineInput>
</InlineEdit.Edit>
</InlineEdit>
</>
);
};
export default Demo;
Removing tag
import React from 'react';
import Tag, { TagContainer } from '@semcore/tag';
import { Box } from '@semcore/flex-box';
const Demo = () => {
const [tags, setTags] = React.useState(['Facebook', 'X (Twitter)', 'Instagram']);
const handleEditTag = (e: React.SyntheticEvent) => {
const parent = e.currentTarget.parentElement;
const dataset = parent ? parent.dataset : null;
const allTags = [...tags];
setTags(allTags.filter((tag, ind) => ind !== Number(dataset?.id)));
return false;
};
return (
<Box>
{tags.map((tag, idx) => (
<TagContainer theme='primary' size='l' data-id={idx} key={idx} mr={1}>
<TagContainer.Tag>
<TagContainer.Tag.Text>{tag}</TagContainer.Tag.Text>
</TagContainer.Tag>
<TagContainer.Close onClick={handleEditTag} />
</TagContainer>
))}
</Box>
);
};
export default Demo;