Tag
Tags are an interactive Badge. By default, its have a close button.
Overview​
Loading...
Import​
Import the component from @faststore/ui
import { Tag } from '@faststore/ui'
Import Styles
import '@faststore/ui/src/components/molecules/Tag/styles.scss'
Usage​
Loading...
Props​
Design Tokens​
| 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) |
Customization​
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.
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.