Price Tag

A price display component showing the amount in large orange text with an optional per-night suffix, strikethrough original price, and discount badge.

Preview

Default

₹499/night
₹1299/night
₹999₹799/night
20% off

Usage

tsx
import { PriceTag } from "zostel-ui";

{/* Default */}
<PriceTag price={499} suffix="/night" />

{/* With discount */}
<PriceTag
  price={499}
  originalPrice={799}
  suffix="/night"
  discount="38% off"
/>

{/* Compact */}
<PriceTag price={499} suffix="/night" size="sm" prefix="from" />

Props

price
Type: number
Default: —

Price amount to display

originalPrice
Type: number
Default: —

Original price shown with strikethrough

suffix
Type: string
Default: "/night"

Text suffix after the price

prefix
Type: string
Default: —

Text prefix before the price (e.g. from)

discount
Type: string
Default: —

Discount badge text

currency
Type: string
Default: "INR"

Currency code

size
Type: "sm" | "md" | "lg"
Default: "md"

Size variant of the price display

className
Type: string
Default: —

Additional CSS classes
Previous Review Card Next Booking Summary