Tag
Interactive badges.
2 min read
The
Tag component is an interactive Badge. By default, its have a close button.Example
Code
Tag
Info Tag
Highlighted Tag
Success Tag
Warning Tag
Danger Tag
Neutral & Big
Usage
Import the component
_10import { Tag } from '@faststore/ui'
Import styles
To apply styles, include the following in your stylesheet:
_10@import '@faststore/ui/src/components/molecules/Tag/styles.scss';
For details, see Importing FastStore UI component styles.
Tag inherits Badge variants (info, highlighted, success, neutral, warning, and danger). Its default size is big, but you can override it explicitly with the inherited size prop.Design tokens
| Local token | Default value/Global token linked |
|---|---|
--fs-tag-text-color | var(--fs-color-text) |
--fs-tag-icon-size | var(--fs-spacing-4) |
--fs-tag-icon-stroke-width | var(--fs-spacing-4) |
Data attributes
You can target and override
Tag styles using the following data attributes:data-fs-tagdata-fs-tag-labeldata-fs-tag-icon-buttonThis component inherits Badge CSS selectors and styles.
Props
| Name | Type | Description | Default |
|---|---|---|---|
| testId | string | ID to find this component in testing tools (e.g.: cypress, testing library, and jest). | fs-tag |
| label* | string | The text displayed inside the tag. | |
| icon | string | number | false | true | {} | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | A React component that will be rendered as an icon. | |
| iconButtonLabel | string | For accessibility purposes, provide an ARIA label to the Icon button | |
| onClose* | () => void | Function called when Icon button is clicked. | |
| size | "small" | "big" | Specifies the size variant. | |
| variant | "info" | "highlighted" | "success" | "neutral" | "warning" | "danger" | Specifies the component variant. | |
| counter | false | true | Enables counter badge. | |
| aria-label | string | For accessibility purposes, adds an ARIA label to the element when `counter` is set to `true`. |
Best Practices
✅ Do's
- Be cautious about the tag's positioning, writing, shape, and color to avoid any confusion with components similar in appearance.
❌ Don'ts
- Don't use long texts in tags.
- Don't use color alone to convey information. If color is needed to convey meaning, ensure there is a text alternative for that meaning as well.
Accessibility
- Text elements must have sufficient color contrast against the background.