Badge

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

Import

import { Badge } from '@faststore/ui'

Usage

React

Loading...

CSS

[data-fs-badge] {
  background-color: #be185d;
  color: #fff;
  display: inline-block;
  padding: 0.4rem;
  border-radius: 0.2rem;
  font-size: 0.9rem;
}

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