Tag

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

Installation

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

Usage

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

API

PropTypeDescription
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
hasErrorbooleanAdd an error style to the tag
onClose() => voidEvent when the tag is closed
roundedbooleanRender rounded corners
sizeSizeThe different sizes of the Tag
srcstringSpecifies the image url to show