Tag

Tags are an interactive Badge. By default, its have a close button.

Overview

Import the component from @faststore/ui

import { Tag } from '@faststore/ui'

Import Styles

import '@faststore/ui/src/components/molecules/Tag/styles.scss'

Local token	Default value/Global token linked
`--fs-tag-text-color`	`var(--fs-color-text)`

`--fs-tag-icon-size`	`var(--fs-spacing-3)`
`--fs-tag-icon-stroke-width`	`var(--fs-spacing-4)`

For further customization, you can use the following data attributes:

data-fs-tag

data-fs-tag-label

data-fs-tag-icon-button

This component inherits Badge CSS selectors and styles.

Be cautious about the tag's positioning, writing, shape, and color to avoid any confusion with components similar in appearance.

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.