⚠️ After March 18, 2024, the FastStore documentation will be migrated to the Developer Portal. For more information, access the official release note.

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

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

Related components

  • 50% off

    DiscountBadge

    DiscountBadge is a Badge used to show product discounts.

    See more