Igloo branding


The Tag component informs users of the status of an object or of an action that's been taken.


To install @igloo-ui/tag in your project, you will need to run the following command using npm:

npm install @igloo-ui/tag

If you prefer Yarn, use the following command instead:

yarn add @igloo-ui/tag


Then to use the component in your code just import it!

import Tag from '@igloo-ui/tag';
import LabelSolid from '@igloo-ui/icons/dist/LabelSolid';

<Tag icon={<LabelSolid size="small" />} appearance="success" dismissible>
  This is a tag


appearanceAppearanceThe different appearances of the Tag
childrenReactNodeThe content of the Tag
classNamestringAdd a specific class to the Tag
colorstringAdd a colored square instead of an image or an icon
dataTeststringAdd a data-test tag for automated tests
dismissiblebooleanRender the close button
iconReactElement<any, string | JSXElementConstructor<any>>The icon used at the beginning of the Tag
idstringThe id of the tag to use when removing
hasErrorbooleanAdd an error style to the tag
onRemove(id: string) => voidCallback to execute on remove tag
roundedbooleanRender rounded corners After rebrand this will be deprecated and rounded will be true by default
sizeSizeThe different sizes of the Tag
srcstringSpecifies the image url to show