Price

The Price component is an inline element intended to display pricing.

Examples

Default Price

Preview

$999.00

Code

import { Price } from '@hv/ui/price';

<Price>$999.00</Price>

Strikethrough Price

Preview

$999.00

Code

import { Price } from '@hv/ui/price';

<Price variant='strikethrough'>$999.00</Price>

Props

Name	Description	Type
className	Additional classes for styling the price.	String
variant	Style variant.	default strikethrough sale
size	Set the price size. (currently unused)	default sm lg
asChild	Renders the button as a child element using <Slot>. Default is false.	true false
props	Additional properties from HTML attributes.	HTMLElement

Customization

You have a lot of flexibility on how you can customize this components; your approach will depend on if you need a global solution, such as a new variant, or a one-off change.

• If the customization is necessary for all use cases, update the component source code in the UI library package directly.
• For a one-off change, pass className overrides

Adding a custom variant

In the component source code (hv-ui/src/alert.tsx), add your new variant's name and classes directly to the alertVariants object.

    variant: {
      default: '...',
      strikethrough: '...',
      sale: '',
      newvariant: '...'
    },

Then pass in your variant on the component:

<Price variant='newvariant'>$999.00</Price>

Overriding a variant

If you need to adjust the styles of a base variant, you can pass in classes directly on the component.

For example, to change the color of a single price display:

<Price className='text-destructive'>$999.00</Price>