PricingTable

Helps users understand different pricing plans to choose from.

To implement PricingTable component into your project you’ll need to the import at least the PricingTable and the PricingTableItem:

import PricingTable, { PricingTableItem } from "@kiwicom/orbit-components/lib/PricingTable";

After adding import into your project you can use it simply like:

<PricingTable>
  <PricingTableItem>content</PricingTableItem>
  <PricingTableItem>content</PricingTableItem>
</PricingTable>

Props

Table below contains all types of the props available in the PricingTable component.

Name	Type	Description
activeElement	`number`	Sets default active element on mobile view
children	`React.Node`	The content of the PricingTable. See Subcomponents
dataTest	`string`	Optional prop for testing purposes.
hasError	`boolean`	Shows error state
desktopRadio	`boolean`	Shows Radio buttons also on desktop version

PricingTable component needs to be used with it’s subcomponent PricingTableItem

import PricingTable, { PricingTableItem } from "@kiwicom/orbit-components/lib/PricingTable";

Table below contains all types of the props in the PricingTableItem component.

Name	Type	Description
action	`React.Node`	Area for action elements, like Button.
active	`boolean`	Shows active state.
badge	`string \\| React.Node`	Badge above the PricingTableItem, works with Badge.
children	`React.Node`	Content of the PricingTableItem component.
dataTest	`string`	Optional prop for testing purposes.
featureIcon	`React.Node`	Feature Icon displayed at top of the PricingTableItem .
mobileDescription	`Translation`	Description of PricingTableItem, displayed on mobile.
name	`Translation`	Name of PricingTableItem.
onClick	`() => void \\| Promise`	Function for handling the onClick event.
price	`Translation`	Price of item.
priceBadge	`React.Node`	Badge instead of `price`, work with Badge.