Skip to main content

Badge

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

Import

import { Badge } from '@faststore/ui'

Usage

Loading...

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

Props

Customization

data-store-badge

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

  • id attribute value must be unique.
  • Text elements must have sufficient color contrast against the background.

Didn't find your answers? Ask the Community. For documentation suggestions, submit your feedback.

JOIN THE COMMUNITY