UI Components
Molecules
Tag

Tag

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

Overview

Import

Import the component from @faststore/ui

import { Tag } from '@faststore/ui'

Import Styles

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

Usage

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

Props

NameTypeDescriptionDefault
Coming Soon

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.
TableToast