Badge
Status descriptors used to emphasize an item's state.
Overview
Example
Code
Neutral
Info
Highlighted
Neutral & Big
Success
Warning
Danger
Import
Import the component from @faststore/ui
_10import { 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:
_10@import '@faststore/ui/src/components/atoms/Badge/styles.scss';
Follow the instructions in the Importing FastStore UI component styles tutorial.
Usage
New arrival
_10<Badge variant="info">New arrival</Badge>
Props
| Name | Type | Description | Default |
|---|---|---|---|
| testId | string | ID 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 |
| counter | false | true | Enables counter badge. | false |
| aria-label | string | For accessibility purposes, adds an ARIA label to the element when `counter` is set to `true`. |
Design Tokens
| Local token | Default value/Global token linked |
|---|---|
--fs-badge-padding | var(--fs-spacing-0) var(--fs-spacing-2) |
--fs-badge-border-radius | var(--fs-border-radius-pill) |
--fs-badge-border-width | 0 |
--fs-badge-border-style | none |
--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-size | var(--fs-text-size-tiny) |
--fs-badge-text-weight | var(--fs-text-weight-bold) |
--fs-badge-transition-function | var(--fs-transition-function) |
--fs-badge-transition-property | var(--fs-transition-property) |
--fs-badge-transition-timing | var(--fs-transition-timing) |
Variants
Big
Big Badge
_10<Badge size="big">Big Badge</Badge>
| Local token | Default value/Global token linked |
|---|---|
--fs-badge-big-text-size | var(--fs-text-size-legend) |
--fs-badge-big-padding | var(--fs-spacing-1) var(--fs-spacing-2) |
Neutral
Neutral Badge
_10<Badge variant="neutral">Neutral Badge</Badge>
| Local token | Default 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
_10<Badge variant="success">Success Badge</Badge>
| Local token | Default 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
_10<Badge variant="highlighted">Highlighted Badge</Badge>
| Local token | Default 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
_10<Badge variant="info">Info Badge</Badge>
| Local token | Default 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
_10<Badge variant="warning">Warning Badge</Badge>
| Local token | Default 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
_10<Badge variant="danger">Danger Badge</Badge>
| Local token | Default 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.,
veganorcruelty-free). - Product availability statuses (e.g.,
NEW,ONLY 1 LEFTandOUT OF STOCK).
Customization
For further customization, you can use the following data attributes:
data-fs-badgedata-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