Game One

Product Badge

Commerce badges for sale, trending, new, and stock status.

NEWSALEOnly 3 leftPOPULARTRENDINGLIMITEDBEST SELLER

Installation

npx shadcn@latest add @gameone/product-badge

Registry dependencies: gameone-utils, fontawesome-kit

Usage

Import
import { ProductBadge } from "@/components/ui/product-badge"
Example
<ProductBadge type="new" />

Examples

New

NEW
import { ProductBadge } from "@/components/ui/product-badge"

export function ProductBadgeNew() {
  return <ProductBadge type="new" />
}

Sale

SALE
import { ProductBadge } from "@/components/ui/product-badge"

export function ProductBadgeSale() {
  return <ProductBadge type="sale" />
}

Low Stock

Only 3 left
import { ProductBadge } from "@/components/ui/product-badge"

export function ProductBadgeLowStock() {
  return <ProductBadge type="low-stock" stock={3} />
}
POPULAR
import { ProductBadge } from "@/components/ui/product-badge"

export function ProductBadgePopular() {
  return <ProductBadge type="popular" />
}
TRENDING
import { ProductBadge } from "@/components/ui/product-badge"

export function ProductBadgeTrending() {
  return <ProductBadge type="trending" />
}

Limited

LIMITED
import { ProductBadge } from "@/components/ui/product-badge"

export function ProductBadgeLimited() {
  return <ProductBadge type="limited" />
}

Best Seller

BEST SELLER
import { ProductBadge } from "@/components/ui/product-badge"

export function ProductBadgeBestSeller() {
  return <ProductBadge type="best-seller" />
}