Documentation
Feedback
Guides
Storefront Development

Storefront Development
Badge

Status descriptors used to emphasize an item's state.

Overview

Example
Code
Neutral
Info
Highlighted
Neutral & Big
Success
Warning
Danger

Import

Import the component from @faststore/ui

_10
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:

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

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

Usage

New arrival

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


Props

NameTypeDescriptionDefault
testIdstringID 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
counterfalse | trueEnables counter badge.false
aria-labelstringFor accessibility purposes, adds an ARIA label to the element when `counter` is set to `true`.

Design Tokens

Local tokenDefault value/Global token linked
--fs-badge-paddingvar(--fs-spacing-0) var(--fs-spacing-2)
--fs-badge-border-radiusvar(--fs-border-radius-pill)
--fs-badge-border-width0
--fs-badge-border-stylenone
--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-sizevar(--fs-text-size-tiny)
--fs-badge-text-weightvar(--fs-text-weight-bold)
--fs-badge-transition-functionvar(--fs-transition-function)
--fs-badge-transition-propertyvar(--fs-transition-property)
--fs-badge-transition-timingvar(--fs-transition-timing)

Variants

Big

Big Badge

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

Local tokenDefault value/Global token linked
--fs-badge-big-text-sizevar(--fs-text-size-legend)
--fs-badge-big-paddingvar(--fs-spacing-1) var(--fs-spacing-2)

Neutral

Neutral Badge

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

Local tokenDefault 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

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

Local tokenDefault 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

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

Local tokenDefault 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

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

Local tokenDefault 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

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

Local tokenDefault 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

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

Local tokenDefault 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"
data-fs-badge-variant="info" | "highlighted" | "success" | "neutral" | "warning" | "danger"

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.

  • 50% off

    DiscountBadge

    DiscountBadge is a Badge used to show product discounts.

    See more
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
On this page