---
title: "Price"
canonical: https://sky-ui.cf.sky.com/components/price
---

# Price

Shows key pricing information in an inline format.

## Purpose

The Price component is used to show key pricing information in an inline format. It can be used to show if there is an active discount, if a price range starts from a certain amount, or if the price is for a set time period (e.g. an amount per month).

For pricing information in a headline format please see [Headline Price](/components/headline-price).

## Anatomy

The Price component can be broken down into the following elements -

## Variants & States

**Note:** Available variants differ between Figma and React. The below describes the
  options for the Figma component. Have a look at the [React
  docs](https://sky-ui.cf.sky.com/components/price/react) to see the available
  props in development.

- Appearance: Default, Light
- Discount: off/on
- Stacked: off/on
- Alignment: Left, Right
- Size: Small, Medium
- Prefix: off/on
- Suffix: off/on
- Upfront cost: off/on
- Disclaimer: off/on

For a large version of the Price component, please see [Headline Price](/components/headline-price).