Tag
The Tag component informs users of the status of an object or of an action that's been taken.
Version 1.7.1
StorybookInstallation
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
| Prop | Type | Default | Description |
|---|---|---|---|
appearance | Appearance | The different appearances of the Tag | |
children | ReactNode | - | The content of the Tag |
className | string | - | Add a specific class to the Tag |
color | string | - | Add a colored square instead of an image or an icon |
dataTest | string | - | Add a data-test tag for automated tests |
dismissible | boolean | Render the close button | |
icon | ReactElement<any, string | JSXElementConstructor<any>> | - | The icon used at the beginning of the Tag |
id | string | - | The id of the tag to use when removing |
hasError | boolean | - | Add an error style to the tag |
onRemove | (id: string) => void | - | Callback to execute on remove tag |
rounded | boolean | Render rounded corners After rebrand this will be deprecated and rounded will be true by default | |
size | Size | The different sizes of the Tag | |
src | string | - | Specifies the image url to show |
disabled | boolean | - | Specifies if the tag is disabled |