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.