Developer mode
Opens components on the React tab by default.
Your bookmarks

PricingTable / React

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

Subcomponents

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

PricingTableItem

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

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

Name Type Default 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.