PricingTable

Helps users understand different pricing plans to choose from.

When to use

  • To build user trust with clearly presented choices.
  • Let enable users to quickly scan for pricing differences and choose the service that’s right for them.

When not to use

  • The information isn’t about pricing—use a table.

Component status

Figma

React

iOS

Android

N/A
Released
N/A
N/A

Content structure

Feature icon: helps explain the value proposition of each choice; badge: supports users in the decision process based on real data; tooltip: optionally indicates the text is wrapped with more info; name: helps users navigate through the offer and you should always use the shortest version; feature list: clearly explains differences among choices and can include custom content (usually a list); action buttons: includes equal calls-to-action without highlighting any choice; price: makes price easy to notice for the initial comparison of choices.