Primer

Pricing options

Use the pricing options to display pricing plan information on a page.

Examples

Default

Cards variant

One option

This is the one-option layout for the pricing options component

Two options

This is the two-item layout for the pricing options component.

Three options

This is the three-option layout for the pricing options component.

PricingOptions is designed to fill the width of the page's main container, thus it cannot be accurately represented within the narrower container of this documentation.

Please refer to our Storybook examples to see the component in a full-width context as originally intended.

Feature list sets

Use PricingOptions.FeatureListHeading to group feature items together.

Included and excluded features

Use PricingOptions.FeatureListItem with variant="included" and variant="excluded" to list included and excluded features.

Component props

PricingOptions Required

NameTypeDefaultrequiredDescription
as'section'
'div'
sectionfalseApplies the underlying HTML element
childrenPricingOptions.ItemtrueApplies the underlying HTML element
variant'default'
'cards'
falseThe variant styling

PricingOptions.Item Required

One item per pricing plan to be displayed. Maximum of 3 items.

NameTypeDefaultrequiredDescription
children'PricingOptions.Heading'
'PricingOptions.Label'
'PricingOptions.Price'
'PricingOptions.FeatureList'
'PricingOptions.Footnote'
undefinedtrueThe contents of the item

PricingOptions.Heading Required

NameTypeDefaultrequiredDescription
ash3, h4, h5, h6h3falseApplies the underlying HTML heading level element
childrenReactNodeundefinedtrueThe heading of the item

PricingOptions.Label

NameTypeDefaultrequiredDescription
childrenReactNodeundefinedtrueThe label of the item

PricingOptions.Description

NameTypeDefaultrequiredDescription
childrenReactNodeundefinedtrueThe description of the item

PricingOptions.Price

NameTypeDefaultrequiredDescription
childrenReactNodeundefinedtrueThe price of the item
currencyCodestringUSDfalseThe currency code
currencySymbolstring$falseThe currency symbol
originalPricestringundefinedfalseThe initial price before any discounts are applied
trailingTextstringfalseThe trailing text

PricingOptions.FeatureList

NameTypeDefaultrequiredDescription
children'PricingOptions.Heading'
'PricingOptions.Item'
undefinedtrueThe list of features
expandedbooleantruefalseControls visibility of feature items. Accepts Object type for granular control at different viewport sizes.
hasDividerbooleantruefalseControls visibility of a visual border between feature lists and adjacent actions

PricingOptions.FeatureListHeading

NameTypeDefaultrequiredDescription
ash4, h5, h6h4falseApplies the underlying HTML heading level element
childrenReactNodeundefinedtrueThe heading of the feature list set

PricingOptions.FeatureListItem

NameTypeDefaultrequiredDescription
childrenReactNodeundefinedtrueThe item of the feature list set
variant'included'
'excluded'
includedfalseThe variant of the feature list set

PricingOptions.Footnote

NameTypeDefaultrequiredDescription
childrenReactNodeundefinedtrueThe footnote of the item