Price - React

View on Figma View on GitHub

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" />

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

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.
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.

disclaimer

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

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

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"  />
  <Price price="£99.00" prefix="From" suffix="a month"  />
</Flex>

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

strikethroughPrice

<Price price="£XX.XX" strikethroughPrice="£XX.XX" suffix="a month"  />

<Price price="£XX.XX" strikethroughPrice="£XX.XX" suffix="a month"  />

Props

Prop	Type	Options (* default)
$align	string	`left`* \| `center` \| `right`
$appearance	string	`default`* \| `light`
$inlinePrefix	boolean	`true` \| `false`*
$inlineSuffix	boolean	`true` \| `false`*
$size	string	`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>

<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>

<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>

$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>

<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>

<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:

headlinePrice.previousPriceText - sets the hidden text used on the previous price when strikethroughPrice is provided
headlinePrice.currentPriceText - sets the hidden text used on the current price when strikethroughPrice is provided

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