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 { Flex } from '@semcore/ui/base-components';
import SmileHappyM from '@semcore/ui/icon/SmileHappy/m';
import SmileSadM from '@semcore/ui/icon/SmileSad/m';
import Tag from '@semcore/ui/tag';
import React from 'react';

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 SmileHappyM from '@semcore/ui/icon/SmileHappy/m';
import Tag from '@semcore/ui/tag';
import React from 'react';

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 { Flex } from '@semcore/ui/base-components';
import Tag from '@semcore/ui/tag';
import React from 'react';

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.

import { Flex } from '@semcore/ui/base-components';
import Tag from '@semcore/ui/tag';
import React from 'react';

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 MathPlusM from '@semcore/ui/icon/MathPlus/m';
import Tag from '@semcore/ui/tag';
import React from 'react';

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 InlineEdit from '@semcore/ui/inline-edit';
import InlineInput from '@semcore/ui/inline-input';
import Tag from '@semcore/ui/tag';
import React from 'react';

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 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 { Box } from '@semcore/ui/base-components';
import { TagContainer } from '@semcore/ui/tag';
import React from 'react';

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;