PriceTag

The PriceTag component displays a formatted price with optional strikethrough original price and discount percentage. It supports multiple sizes for use in product cards, cart items, and checkout summaries.

Import

import { PriceTag } from '@nim-ui/components';

Basic Usage

$99.99

Code

<PriceTag price="$99.99" />

With Original Price

Show the original price with a strikethrough to indicate a discount.

$79.99$99.99

Code

<PriceTag price="$79.99" originalPrice="$99.99" />

With Discount Percentage

Display the savings percentage alongside the prices.

$799$999Save 20%

Code

<PriceTag
  price="$799"
  originalPrice="$999"
  discountPercent="20%"
/>

Sizes

Three size options are available for different display contexts.

$49.99$69.99

Code

<PriceTag price="$49.99" originalPrice="$69.99" size="sm" />
<PriceTag price="$49.99" originalPrice="$69.99" size="md" />
<PriceTag price="$49.99" originalPrice="$69.99" size="lg" />

Props

Name	Type	Default	Description
`price*`	`string \| number`	-	The current price to display
`originalPrice`	`string \| number`	-	Original price shown with strikethrough when discounted
`discountPercent`	`string`	-	Discount percentage text, e.g. "20%"
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size of the price text
`className`	`string`	-	Additional CSS classes to apply

Usage Examples

Product Listing

function ProductPrice({ product }: { product: Product }) {
  const hasDiscount = product.salePrice < product.price;

  return (
    <PriceTag
      price={`$${product.salePrice.toFixed(2)}`}
      originalPrice={hasDiscount ? `$${product.price.toFixed(2)}` : undefined}
      discountPercent={
        hasDiscount
          ? `${Math.round((1 - product.salePrice / product.price) * 100)}%`
          : undefined
      }
    />
  );
}

Checkout Summary

function CheckoutTotal({ subtotal, discount, total }: CheckoutProps) {
  return (
    <div className="space-y-2">
      <div className="flex justify-between">
        <span>Subtotal</span>
        <PriceTag price={subtotal} size="sm" />
      </div>
      {discount > 0 && (
        <div className="flex justify-between text-green-600">
          <span>Discount</span>
          <PriceTag price={`-$${discount.toFixed(2)}`} size="sm" />
        </div>
      )}
      <div className="flex justify-between border-t pt-2 font-semibold">
        <span>Total</span>
        <PriceTag price={`$${total.toFixed(2)}`} size="lg" />
      </div>
    </div>
  );
}

ProductCard - Product display card
CartItem - Shopping cart line item
Badge - Status indicator for sale tags

On this page