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

# Headline Price — React

Shows key pricing information in a headline format.

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

---

Key pricing in a headline format, typically used across product discovery and brochureware areas of the estate.

**Note:** For more general pricing see [Price](/components/price/).

```tsx
<HeadlinePrice 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
  <HeadlinePrice $align="left" 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">
  <HeadlinePrice price="£99.99" prefix="From" suffix="a month"  />
  <HeadlinePrice price="£99.00" prefix="From" suffix="a month"  />
</Flex>
```

### strikethroughPrice

```tsx
  <HeadlinePrice $align="left" price="£XX.XX" strikethroughPrice="£XX.XX" suffix="a month"  />
```

---

## Props

| Prop | Type | Options (__*__ _default_) |
| --- | --- | --- |
| $appearance | string | `default`__*__ \| `light` |
| $inline | boolean | `true` \| `false`__*__ |
| $theme | string | See [gradients](/foundations/gradients/) for supported values. Overides default strikethrough styling. |

### $appearance

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

### $inline

```tsx
<HeadlinePrice $inline price="£XX.XX" prefix="from" suffix="a month" />
```

### $theme

```tsx
<Flex $gap={6} $flexDirection={{ xs: 'column', md: 'row' }} $alignItems="center">
  <HeadlinePrice $theme="products.broadband" price="£XX.XX" prefix="from" suffix="a month" />
  <HeadlinePrice $theme="products.tv" price="£XX.XX" strikethroughPrice="£XX.XX" 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/)