Badge
Status descriptors used to emphasize an item's state.
The
Badge component is used to emphasize an item's state by displaying concise, non-interactive labels. Typical use cases include:- Highlighting promotional discounts
- Indicating product features (e.g.,
veganorcruelty-free) - Displaying availability statuses (e.g.,
NEW,ONLY 1 LEFT, andOUT OF STOCK)
Example
Code
Neutral
Info
Highlighted
Neutral & Big
Success
Warning
Danger
Usage
Import the component
_10import { Badge } from "@faststore/ui";
Import styles
To apply styles, include the following in your stylesheet:
_10@import "@faststore/ui/src/components/atoms/Badge/styles.scss";
For details, see Importing FastStore UI component styles.
Examples
Size
Small (Default)
Example
Code
Small Badge
Big
Example
Code
Big Badge
Variants
Neutral
Example
Code
Neutral Badge
Success
Example
Code
Success Badge
Highlighted
Example
Code
Highlighted Badge
Info
Example
Code
Info Badge
Warning
Example
Code
Warning Badge
Danger
Example
Code
Danger Badge
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) |
Design tokens: Big
Big badges use increased padding and typography to create a more prominent and impactful component, suitable for key highlights or calls to action.
| 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) |
Design tokens: Neutral
Neutral badges present information in a low-contrast style, ideal for secondary statuses or default states.
| 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) |
Design tokens: Success
Success badges use a green palette to confirm actions and indicate favorable outcomes.
| 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) |
Design tokens: Highlighted
Highlighted badges draw attention with a high-contrast color scheme, which is ideal for promotions or featured items.
| 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) |
Design tokens: Info
Info badges use a blue palette to communicate neutral but helpful information, guidance, or notifications.
| 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) |
Design tokens: Warning
Warning badges use an orange or yellow palette to signal caution, pending actions, or non-critical alerts.
| 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) |
Design tokens: Danger
Danger badges use a red palette to warn users of critical errors, destructive actions, or important failures.
| 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) |
Data attributes
You can target and override
Badge styles using the following data attributes:data-fs-badgedata-fs-badge-size="small" | "big"data-fs-badge-variant="info" | "highlighted" | "success" | "neutral" | "warning" | "danger"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`. |
Best practices
✅ Do's
- Place the badge next to or on top of its related item.
- Be cautious about the badge's positioning, text, shape, and color to avoid any confusion with components similar in appearance.
- Ensure sufficient text contrast against the background.
❌ Don'ts
- Don't use long text in badges. A reasonable character limit is 15.
- Don't label badges with active verbs.
- Don't rely on color alone to convey meaning. Ensure there is a text alternative for that meaning as well.
- Don't place badges next to buttons, as badges are not interactive and could confuse users.
Related components
- 50% off