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

# Price — React

Shows key pricing information in an inline format.

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

---

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

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

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

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

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

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