Skip to content

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.

tsx
import React from 'react';
import Tag from 'intergalactic/tag';
import SmileHappyM from 'intergalactic/icon/SmileHappy/m';

const Demo = () => {
  return (
    <>
      <Tag addonLeft={SmileHappyM} mb={2}>
        Tag
      </Tag>
      <br />
      <Tag>
        <Tag.Addon>
          <SmileHappyM />
        </Tag.Addon>
        <Tag.Text>Tag</Tag.Text>
      </Tag>
    </>
  );
};

export default Demo;
import React from 'react';
import Tag from 'intergalactic/tag';
import SmileHappyM from 'intergalactic/icon/SmileHappy/m';

const Demo = () => {
  return (
    <>
      <Tag addonLeft={SmileHappyM} mb={2}>
        Tag
      </Tag>
      <br />
      <Tag>
        <Tag.Addon>
          <SmileHappyM />
        </Tag.Addon>
        <Tag.Text>Tag</Tag.Text>
      </Tag>
    </>
  );
};

export default Demo;

Custom tag color

You can set custom tag colors.

tsx
import React from 'react';
import Tag from 'intergalactic/tag';
import SmileSadM from 'intergalactic/icon/SmileSad/m';

const Demo = () => {
  return (
    <>
      <Tag theme='primary' color='red-500'>
        <Tag.Addon>
          <SmileSadM />
        </Tag.Addon>
        <Tag.Text>Tag</Tag.Text>
      </Tag>
    </>
  );
};

export default Demo;
import React from 'react';
import Tag from 'intergalactic/tag';
import SmileSadM from 'intergalactic/icon/SmileSad/m';

const Demo = () => {
  return (
    <>
      <Tag theme='primary' color='red-500'>
        <Tag.Addon>
          <SmileSadM />
        </Tag.Addon>
        <Tag.Text>Tag</Tag.Text>
      </Tag>
    </>
  );
};

export default Demo;

Adding tag

tsx
import React from 'react';
import Tag from 'intergalactic/tag';
import MathPlusM from 'intergalactic/icon/MathPlus/m';

const Demo = () => {
  return (
    <Tag interactive theme='additional' onClick={console.log}>
      <Tag.Addon>
        <MathPlusM />
      </Tag.Addon>
      <Tag.Text>Add tag</Tag.Text>
    </Tag>
  );
};

export default Demo;
import React from 'react';
import Tag from 'intergalactic/tag';
import MathPlusM from 'intergalactic/icon/MathPlus/m';

const Demo = () => {
  return (
    <Tag interactive 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.

tsx
import React from 'react';
import InlineInput from 'intergalactic/inline-input';
import InlineEdit from 'intergalactic/inline-edit';
import Tag from 'intergalactic/tag';

const Demo = () => {
  const [value, setValue] = React.useState('Default tag');
  const [editable, setEditable] = React.useState(false);

  const handleValue = (value) => {
    setEditable(false);
    setValue(value);
  };
  const resetEditable = () => setEditable(false);

  return (
    <>
      <InlineEdit w={150} editable={editable} onEditableChange={setEditable}>
        <InlineEdit.View>
          <Tag interactive>
            <Tag.Text>{value}</Tag.Text>
          </Tag>
        </InlineEdit.View>
        <InlineEdit.Edit>
          <InlineInput onConfirm={handleValue} onCancel={resetEditable}>
            <InlineInput.Value defaultValue={value} />
          </InlineInput>
        </InlineEdit.Edit>
      </InlineEdit>
    </>
  );
};

export default Demo;
import React from 'react';
import InlineInput from 'intergalactic/inline-input';
import InlineEdit from 'intergalactic/inline-edit';
import Tag from 'intergalactic/tag';

const Demo = () => {
  const [value, setValue] = React.useState('Default tag');
  const [editable, setEditable] = React.useState(false);

  const handleValue = (value) => {
    setEditable(false);
    setValue(value);
  };
  const resetEditable = () => setEditable(false);

  return (
    <>
      <InlineEdit w={150} editable={editable} onEditableChange={setEditable}>
        <InlineEdit.View>
          <Tag interactive>
            <Tag.Text>{value}</Tag.Text>
          </Tag>
        </InlineEdit.View>
        <InlineEdit.Edit>
          <InlineInput onConfirm={handleValue} onCancel={resetEditable}>
            <InlineInput.Value defaultValue={value} />
          </InlineInput>
        </InlineEdit.Edit>
      </InlineEdit>
    </>
  );
};

export default Demo;

Removing tag

tsx
import React from 'react';
import Tag from 'intergalactic/tag';
import { Box } from 'intergalactic/flex-box';

const Demo = () => {
  const [tags, setTags] = React.useState(['vk', 'fk', 'twitter', 'instagram']);

  const handleEditTag = (e) => {
    const { dataset } = e.currentTarget.parentElement;
    const allTags = [...tags];
    setTags(allTags.filter((tag, ind) => ind !== Number(dataset.id)));

    return false;
  };

  return (
    <Box>
      {tags.map((tag, idx) => (
        <Tag theme='primary' interactive data-id={idx} key={idx} mr={1}>
          <Tag.Text>{tag}</Tag.Text>
          <Tag.Close onClick={handleEditTag} />
        </Tag>
      ))}
    </Box>
  );
};

export default Demo;
import React from 'react';
import Tag from 'intergalactic/tag';
import { Box } from 'intergalactic/flex-box';

const Demo = () => {
  const [tags, setTags] = React.useState(['vk', 'fk', 'twitter', 'instagram']);

  const handleEditTag = (e) => {
    const { dataset } = e.currentTarget.parentElement;
    const allTags = [...tags];
    setTags(allTags.filter((tag, ind) => ind !== Number(dataset.id)));

    return false;
  };

  return (
    <Box>
      {tags.map((tag, idx) => (
        <Tag theme='primary' interactive data-id={idx} key={idx} mr={1}>
          <Tag.Text>{tag}</Tag.Text>
          <Tag.Close onClick={handleEditTag} />
        </Tag>
      ))}
    </Box>
  );
};

export default Demo;

Released under the MIT License.

Released under the MIT License.