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 { Flex } from 'intergalactic/flex-box';
import SmileHappyM from 'intergalactic/icon/SmileHappy/m';
import SmileSadM from 'intergalactic/icon/SmileSad/m';

const Demo = () => {
  return (
    <Flex gap={1}>
      <Tag size='l' addonLeft={SmileHappyM}>
        Tag
      </Tag>
      <Tag size='l'>
        <Tag.Addon>
          <SmileSadM />
        </Tag.Addon>
        <Tag.Text>Tag</Tag.Text>
      </Tag>
    </Flex>
  );
};

export default Demo;

import React from 'react';
import Tag from 'intergalactic/tag';
import { Flex } from 'intergalactic/flex-box';
import SmileHappyM from 'intergalactic/icon/SmileHappy/m';
import SmileSadM from 'intergalactic/icon/SmileSad/m';

const Demo = () => {
  return (
    <Flex gap={1}>
      <Tag size='l' addonLeft={SmileHappyM}>
        Tag
      </Tag>
      <Tag size='l'>
        <Tag.Addon>
          <SmileSadM />
        </Tag.Addon>
        <Tag.Text>Tag</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.

tsx

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

const Demo = () => {
  return (
    <Tag color='violet-500' size='l' addonLeft={SmileHappyM}>
      Tag
    </Tag>
  );
};

export default Demo;

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

const Demo = () => {
  return (
    <Tag color='violet-500' size='l' addonLeft={SmileHappyM}>
      Tag
    </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.

tsx

import React from 'react';
import Tag from 'intergalactic/tag';
import { Flex } from 'intergalactic/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;

import React from 'react';
import Tag from 'intergalactic/tag';
import { Flex } from 'intergalactic/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.

tsx

import React from 'react';
import Tag from 'intergalactic/tag';
import { Flex } from 'intergalactic/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;

import React from 'react';
import Tag from 'intergalactic/tag';
import { Flex } from 'intergalactic/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

tsx

import React from 'react';
import Tag from 'intergalactic/tag';
import MathPlusM from 'intergalactic/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;

import React from 'react';
import Tag from 'intergalactic/tag';
import MathPlusM from 'intergalactic/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.

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 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;

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 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

tsx

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

const Demo = () => {
  const [tags, setTags] = React.useState(['Facebook', 'X (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) => (
        <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;

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

const Demo = () => {
  const [tags, setTags] = React.useState(['Facebook', 'X (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) => (
        <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;

Accessibility

Writing code

CSS Injection

Tag addon

Custom color

Grouping tags

Less than 5 tags

5 tags or more

Adding tag

Editing tag

Removing tag

Accessibility

CSS Injection

Tag

Tag addon ​

Custom color ​

Grouping tags ​

Less than 5 tags ​

5 tags or more ​

Adding tag ​

Editing tag ​

Removing tag ​

Tag addon

Custom color

Grouping tags

Less than 5 tags

5 tags or more

Adding tag

Editing tag

Removing tag