Skip to main content

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 tokenDefault value/Global token linked
--fs-tag-text-colorvar(--fs-color-text)
--fs-tag-icon-sizevar(--fs-spacing-3)
--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.

Didn't find your answers? Ask the Community. For documentation suggestions, submit your feedback.

JOIN THE COMMUNITY