Tag

Interactive badges.

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

Example

Code

Tag

Warning Tag

Danger Tag

Neutral & Big

Usage


_10import { Tag } from '@faststore/ui'

To apply styles, include the following in your stylesheet:


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

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)`

You can target and override Tag styles using the following data attributes:

data-fs-tag

data-fs-tag-label

data-fs-tag-icon-button

This component inherits Badge CSS selectors and styles.

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

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.