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.