---
title: "Price — React"
canonical: https://sky-ui.cf.sky.com/components/price/react
apiPackages: [{"name":"@sky-uk/ui-core","representedVersion":"14.0.0"}]
---

# Price — React

Shows key pricing information in an inline format.

_Introduced in `@sky-uk/ui-core` v2.0.0._

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

---

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

**Note:** For brochureware and product discovery pricing [see
  HeadlinePrice](/components/headline-price/).

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

**Note:** The `term` prop is typically used in the context of the [ProductCard](/components/product-card/). Applying the `term` prop will force the `<Price />` component to render an inline suffix and align it left.

### disclaimer

The `disclaimer` accepts markdown content.

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

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

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

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

### term

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

### upfrontCost

```tsx
  <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](/core/hooks/use-responsive-props/)) | `small` \| `medium`* |

### $align

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

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

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

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

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

- [display](/core/system/display/)
- [flex-child](/core/system/flex-child/)
- [margin](/core/system/margin/)

## 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](/core/hooks/use-translation/)