Your bookmarks

PricingTable

Helps users understand different pricing plans to choose from.

Getting people to purchase a service requires their trust. Help earn that trust by presenting choices clearly so they can make informed decisions.

Presenting pricing information in a structured table allows users to quickly scan for differences and choose the service that’s right for them.

Component status

Figma
On hold
Web (React)
Released
iOS (Swift)
n/a
Android (Kotlin)
n/a
Sketch
Released

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.