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'

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

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

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

Summer Sale

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

Name	Type	Description	Default
testId	`string`	ID to find this component in testing tools (e.g.: cypress, testing library, and jest).	`fs-tag`
label*	`string`	The text displayed inside the tag.
icon	`string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal`	A React component that will be rendered as an icon.
iconButtonLabel	`string`	For accessibility purposes, provide an ARIA label to the Icon button
onClose*	`() => void`	Function called when Icon button is clicked.
size	`"small" \| "big"`	Specifies the size variant.
variant	`"info" \| "highlighted" \| "success" \| "neutral" \| "warning" \| "danger"`	Specifies the component variant.
counter	`false \| true`	Enables counter badge.
aria-label	`string`	For accessibility purposes, adds an ARIA label to the element when `counter` is set to `true`.

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

`--fs-tag-icon-size`	`var(--fs-spacing-4)`
`--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.