Price - React

Introduced in @sky-uk/ui-core v2.0.0.

import { Price } from '@sky-uk/ui-core';

The Price component is used to show key pricing information in a preset inline format.

For brochureware and product discovery pricing see HeadlinePrice.

<Price price="£XX.XX" prefix="from" suffix="a month" $inlineSuffix  />

Content

Prop	Description
disclaimer	Disclaimer content can be used for further clarification on a price, for example if the price is a limited time offer or increases after a certain amount of time.
discountDisclaimer	Disclaimer content only shows for the Discount variant. It gives more context about the price before the discount.
plusMinus	Prefixes the price with either a `plus` or `minus` symbol.
prefix	Normally used for "from" but can be changed if required, or turned off entirely.
price	Main text area for the amount including decimals.
strikethroughPrice	A discount option is available which allows the designer to enter in an old price which is struck-out.
suffix	Normally used for a term period, the suffix can be edited, or turned off entirely.
term	Typically used to indicate the duration for which the price is valid.
upfrontCost	Any additional initial costs are declared separately.

The term prop is typically used in the context of the ProductCard. Applying the term prop will force the <Price /> component to render an inline suffix and align it left.

disclaimer

The disclaimer accepts markdown content.

<Price disclaimer="This is **not** a real price!" price="£XX.XX" prefix="from" suffix="a month" $inlineSuffix />

plusMinus

The plusMinus prop allows you to prefix the price with either a plus or minus symbol.

<Flex $gap={6} $flexDirection={{ xs: 'column', md: 'row' }} $alignItems="center">
    <Price plusMinus="plus" price="£XX.XX" prefix="from" suffix="a month" $inlineSuffix />
    <Price plusMinus="minus" price="£XX.XX" prefix="from" suffix="a month" $inlineSuffix />
  </Flex>

price

The price expects a string including the unit and amount, any zero decimal amounts (.00) will be omitted.

<Flex $gap={6} $flexDirection={{ xs: 'column', md: 'row' }} $alignItems="center">
  <Price price="£99.99" prefix="from" suffix="a month" $inlineSuffix />
  <Price price="£99.00" prefix="from" suffix="a month" $inlineSuffix />
</Flex>

strikethroughPrice & discountDisclaimer

When setting a discount price via the strikethroughPrice prop, discountDisclaimer should also be set.

<Price price="£XX.XX" strikethroughPrice="£XX.XX" suffix="a month" $inlineSuffix discountDisclaimer="What a generous discount!"  />

term

<Box $width="fit-content">
    <Price price="£XX.XX" suffix="a month" $inlineSuffix term="12 months"  />
  </Box>

upfrontCost

<Price price="£XX.XX" suffix="a month" $inlineSuffix upfrontCost="£10"  />

Props

Prop	Type	Options (*default)
$align	string	`left`* \| `center` \| `right`
$appearance	string	`default`* \| `light`
$highlightPrice	boolean	`true` \| `false`*
$inlinePrefix	boolean	`true` \| `false`*
$inlineSuffix	boolean	`true` \| `false`*
$size	string (This prop is responsive)	`small` \| `medium`*

$align

<Flex $gap={6} $flexDirection={{ xs: 'column', md: 'row' }} $justifyContent="space-between">
  <Price price="£XX.XX" prefix="from" suffix="a month"  />
  <Price $align="center" $alignSelf="center" price="£XX.XX" prefix="from" suffix="a month"  />
  <Price $align="right" $alignSelf="flex-end" price="£XX.XX" prefix="from" suffix="a month" />
</Flex>

$appearance

<Flex $gap={6} $flexDirection={{ xs: 'column', md: 'row' }} $alignItems="center">
  <Price $appearance="default" price="£XX.XX" prefix="from" suffix="a month" />
  <Box $bgColor="grey80" $padding={5}>
    <Price $appearance="light" price="£XX.XX" prefix="from" suffix="a month" />
  </Box>
</Flex>

$highlightPrice

<Flex $gap={6} $alignItems="center" $justifyContent="flex-start">
  <Price price="£XX.XX" prefix="from" suffix="a month" />
  <Price $highlightPrice price="£XX.XX" prefix="from" suffix="a month" />
</Flex>

$inlinePrefix | $inlineSuffix

$inlinePrefix sets the prefix or strikethroughPrice to show inline with price. $inlineSuffix sets the suffix text to show inline with the price. Both can be set independently to achieve the required layout.

<Flex $gap={6} $alignItems="center" $justifyContent="space-between">
  <Price price="£XX.XX" prefix="from" suffix="a month" />
  <Price $inlinePrefix price="£XX.XX" prefix="from" suffix="a month" />
  <Price $inlineSuffix price="£XX.XX" prefix="from" suffix="a month" />
  <Price $inlinePrefix $inlineSuffix price="£XX.XX" prefix="from" suffix="a month" />
</Flex>

$size

<Flex $gap={6}>
  <Price $size="small" price="£XX.XX" prefix="from" suffix="a month" />
  <Price price="£XX.XX" prefix="from" suffix="a month" />
</Flex>

System Modifiers

This component also supports the props applied using the following system modifiers:

Translatable Fields

This component supports translation on the following fields:

price.previousPriceText - sets the hidden text used on the previous price when strikethroughPrice is provided
price.currentPriceText - sets the hidden text used on the current price when strikethroughPrice is provided
price.upfrontPricePrefix - sets the hidden text used for the upfront cost when the upfrontCost prop is provided
price.upfrontPriceSuffix - sets the hidden text used for the upfront cost when the upfrontCost prop is provided
price.plusPriceText - sets the hidden text used for the plus price when the plusPrice prop is provided
price.minusPriceText - sets the hidden text used for the plus-minus price when the minusPrice prop is provided

For more on translatable fields, view the useTranslation docs here: useTranslation