Documentation
Feedback
Guides
Storefront Development

Storefront Development
FastStoreUI componentsMolecules
Tag

Interactive badges.

The Tag component is an interactive Badge. By default, its have a close button.

Overview

Example
Code
Tag
Warning Tag
Danger Tag
Neutral & Big

Import

Import the component from @faststore/ui

_10
import { Tag } from '@faststore/ui'

Import Styles into your FastStore project

To apply the styles of this component in your FastStore project, import the following into your stylesheet:

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

Follow the instructions in the Importing FastStore UI component styles tutorial.

Usage

Summer Sale

_10
<Tag variant="info" label="Summer Sale" onClose={() => {}} />


Props


Design Tokens

Local tokenDefault value/Global token linked
--fs-tag-text-color
var(--fs-color-text)
--fs-tag-icon-sizevar(--fs-spacing-4)
--fs-tag-icon-stroke-widthvar(--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.
Contributors
3
Photo of the contributor
Photo of the contributor
Photo of the contributor
+ 3 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
3
Photo of the contributor
Photo of the contributor
Photo of the contributor
+ 3 contributors
On this page