Badge

Badges are status descriptors used to emphasize an item's state.

Overview

Import

Import the component from @faststore/ui

import { Badge } 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:

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

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

Usage

New arrival

<Badge variant="info">New arrival</Badge>

Props

Name	Type	Description	Default
testId	`string`	ID to find this component in testing tools (e.g.: cypress, testing library, and jest).	`fs-badge`
size	`"small" \| "big"`	Specifies the size variant.	`small`
variant	`"info" \| "highlighted" \| "success" \| "neutral" \| "warning" \| "danger"`	Specifies the component variant.	`neutral`
counter	`false \| true`	Enables counter badge.	`false`
aria-label	`string`	For accessibility purposes, adds an ARIA label to the element when `counter` is set to `true`.

Design Tokens

Local token	Default value/Global token linked
`--fs-badge-padding`	`var(--fs-spacing-0) var(--fs-spacing-2)`

`--fs-badge-border-radius`	`var(--fs-border-radius-pill)`
`--fs-badge-border-width`	`0`
`--fs-badge-border-style`	`none`
`--fs-badge-border-color`	`transparent`

`--fs-badge-bkg-color`	`var(--fs-color-neutral-bkg)`

`--fs-badge-text-color`	`var(--fs-color-text)`
`--fs-badge-text-size`	`var(--fs-text-size-tiny)`
`--fs-badge-text-weight`	`var(--fs-text-weight-bold)`

`--fs-badge-transition-function`	`var(--fs-transition-function)`
`--fs-badge-transition-property`	`var(--fs-transition-property)`
`--fs-badge-transition-timing`	`var(--fs-transition-timing)`

Variants

Big

Big Badge

<Badge size="big">Big Badge</Badge>

Local token	Default value/Global token linked
`--fs-badge-big-text-size`	`var(--fs-text-size-legend)`
`--fs-badge-big-padding`	`var(--fs-spacing-1) var(--fs-spacing-2)`

Neutral

Neutral Badge

<Badge variant="neutral">Neutral Badge</Badge>

Local token	Default value/Global token linked
`--fs-badge-neutral-bkg-color`	`var(--fs-color-neutral-bkg)`
`--fs-badge-neutral-text-color`	`var(--fs-badge-text-color)`
`--fs-badge-neutral-border-color`	`var(--fs-color-neutral-bkg)`

Success

Success Badge

<Badge variant="success">Success Badge</Badge>

Local token	Default value/Global token linked
`--fs-badge-success-bkg-color`	`var(--fs-color-success-bkg)`
`--fs-badge-success-text-color`	`var(--fs-badge-text-color)`
`--fs-badge-success-border-color`	`var(--fs-color-success-bkg)`

Highlighted

Highlighted Badge

<Badge variant="highlighted">Highlighted Badge</Badge>

Local token	Default value/Global token linked
`--fs-badge-highlighted-bkg-color`	`var(--fs-color-highlighted-bkg)`
`--fs-badge-highlighted-text-color`	`var(--fs-color-highlighted-text)`
`--fs-badge-highlighted-border-color`	`var(--fs-color-highlighted-bkg)`

Info

Info Badge

<Badge variant="info">Info Badge</Badge>

Local token	Default value/Global token linked
`--fs-badge-info-bkg-color`	`var(--fs-color-info-bkg)`
`--fs-badge-info-text-color`	`var(--fs-color-info-text)`
`--fs-badge-info-border-color`	`var(--fs-color-info-bkg)`

Warning

Warning Badge

<Badge variant="warning">Warning Badge</Badge>

Local token	Default value/Global token linked
`--fs-badge-warning-bkg-color`	`var(--fs-color-warning-bkg)`
`--fs-badge-warning-text-color`	`var(--fs-color-warning-text)`
`--fs-badge-warning-border-color`	`var(--fs-color-warning-bkg)`

Danger

Danger Badge

<Badge variant="danger">Danger Badge</Badge>

Local token	Default value/Global token linked
`--fs-badge-danger-bkg-color`	`var(--fs-color-danger-bkg)`
`--fs-badge-danger-text-color`	`var(--fs-badge-text-color)`
`--fs-badge-danger-border-color`	`var(--fs-color-danger-bkg)`

Use Cases

Use the Badge component to highlight:

Promotional discounts.
Product features (e.g., vegan or cruelty-free).
Product availability statuses (e.g., NEW,ONLY 1 LEFT and OUT OF STOCK).

Customization

For further customization, you can use the following data attributes:

data-fs-badge

data-fs-badge-size="small" | "big"

Best Practices

✅ Do's

Place the badge next to or on top of its related item.
Be cautious about the badge's positioning, writing, shape, and color to avoid any confusion with components similar in appearance.

❌ Don'ts

Don't use long texts in badges. A reasonable character limit is 15.
Don't label badges with active verbs.
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.
Don't place badges next to buttons. Although badges and buttons are similar in appearance, badges are not interactive and may confuse users if not used in the proper context.

Accessibility

Text elements must have sufficient color contrast against the background.

Related components

50% off
DiscountBadge
DiscountBadge is a Badge used to show product discounts.
See more

Getting Started Button