--- title: "Pricing table design: variants and examples | Kombai" description: "A pricing table sets plans side by side, each with its price, what it includes and a button, so people can compare and pick one." canonical_url: https://kombai.com/glossary/pricing-table/ author: "The Kombai Team" --- # Pricing table A pricing table sets plans side by side, each with its price, what it includes and a button, so people can compare and pick one. - Also called: pricing page, plans - Platforms: Web, Mobile - In the Kombai gallery: [175 web designs](https://kombai.com/gallery/web/pricing/), [35 mobile designs](https://kombai.com/gallery/mobile/pricing/) - [Lumen](https://kombai.com/gallery/inspirations/pricing-page-web-174/) (Web) - [Verano](https://kombai.com/gallery/inspirations/pricing-page-ios-4/) (Mobile) - [Quillo](https://kombai.com/gallery/inspirations/pricing-page-web-30/) (Web) ## What is a pricing table? A pricing table lays out the plans a product sells, each with a name, a price, the features it includes and a button to choose it. People compare two to four plans at a glance and pick the one that fits, often after switching between monthly and yearly prices. - Each plan is a card or column with a name, a price, a feature list and one button. - One plan is often raised, outlined or badged as the recommended pick. ## When to use pricing table - **A few clear plans.** Two to four tiers that differ by limits, seats or features. - **Upgrade moments.** Inside the product, when someone hits a limit or a trial ends. - **Billing choices.** Monthly and yearly prices people want to weigh before paying. ## When not to use one - **One price for everyone.** Show the price next to the buy button. A table of one adds nothing. - **Every deal is custom.** If the price always comes from a quote, ask people to book a call. - **Dozens of features.** Don't cram them into the cards. Put the full list in a comparison table below. ## Anatomy 1. **Billing switch**: Monthly or yearly, with the saving 2. **Plan and price**: Name, price and billing period 3. **Feature list**: What the plan includes 4. **Button**: One per plan, named for it 5. **Badge**: Marks the recommended plan 6. **States**: Monthly, yearly, current, focus ## Variants We sorted every pricing design in the Kombai gallery and found six patterns. ### 1. Tier cards with a recommended plan The default. Three or four plan cards in a row, with the most popular plan raised, outlined or badged. - [Loomora](https://kombai.com/gallery/inspirations/pricing-page-web-17/) (Web) - [Halftone](https://kombai.com/gallery/inspirations/pricing-page-web-51/) (Web) - [Cobalt](https://kombai.com/gallery/inspirations/pricing-page-ios-11/) (Mobile) ### 2. Billing period switch A Monthly and Yearly switch above the plans, usually with the saving spelled out, like "Save 20%". - [Kaleido](https://kombai.com/gallery/inspirations/pricing-page-web-18/) (Web) - [Parley](https://kombai.com/gallery/inspirations/pricing-page-web-44/) (Web) - [Halden](https://kombai.com/gallery/inspirations/pricing-page-ios-22/) (Mobile) ### 3. Comparison tables Plans as columns and features as rows, ticked or crossed, for products where the details decide the plan. - [Bramble](https://kombai.com/gallery/inspirations/pricing-page-web-127/) (Web) - [Kestrel](https://kombai.com/gallery/inspirations/pricing-page-web-156/) (Web) - [Adagio](https://kombai.com/gallery/inspirations/pricing-page-ios-9/) (Mobile) ### 4. Usage sliders A slider sets the volume of emails, events or jobs, and the price follows it. - [Postara](https://kombai.com/gallery/inspirations/pricing-page-web-22/) (Web) - [Tickwell](https://kombai.com/gallery/inspirations/pricing-page-web-9/) (Web) - [Beaconly](https://kombai.com/gallery/inspirations/pricing-page-web-10/) (Web) ### 5. Stacked plan picker Mobile paywalls stack two or three plans as radio cards, one already selected, above a single button. - [Tellus](https://kombai.com/gallery/inspirations/pricing-page-ios-3/) (Mobile) - [Zenith](https://kombai.com/gallery/inspirations/pricing-page-ios-35/) (Mobile) - [Murmur Pro](https://kombai.com/gallery/inspirations/pricing-page-ios-33/) (Mobile) ### 6. Trial timelines A plan choice paired with a timeline of the free trial: what people get today and when the first charge lands. - [Orbit](https://kombai.com/gallery/inspirations/pricing-page-ios-8/) (Mobile) - [Recall](https://kombai.com/gallery/inspirations/pricing-page-ios-29/) (Mobile) - [Palmwood Teams](https://kombai.com/gallery/inspirations/pricing-page-web-76/) (Web) ## Where pricing tables show up ### Pricing pages The public page on the marketing site that lists every plan and its price. - [Tidebook](https://kombai.com/gallery/inspirations/pricing-page-web-62/) (Web) - [Marlow](https://kombai.com/gallery/inspirations/pricing-page-web-99/) (Web) - [Sundial](https://kombai.com/gallery/inspirations/pricing-page-web-115/) (Web) ### Upgrade prompts A sheet or modal inside the product, shown when someone hits a limit or a trial runs out. - [Marlowe](https://kombai.com/gallery/inspirations/pricing-page-web-148/) (Web) - [Quillmark](https://kombai.com/gallery/inspirations/pricing-page-web-117/) (Web) - [Tessera](https://kombai.com/gallery/inspirations/pricing-page-ios-20/) (Mobile) ### Billing settings The plans tab in account settings, where people see the plan they are on and switch to another. - [Plan and billing](https://kombai.com/gallery/inspirations/pricing-page-web-43/) (Web) - [Kestrel](https://kombai.com/gallery/inspirations/pricing-page-web-91/) (Web) - [Plan](https://kombai.com/gallery/inspirations/pricing-page-web-135/) (Web) ### Signup and onboarding A plan step in the signup flow, picked while the account or workspace is being set up. - [Sextant](https://kombai.com/gallery/inspirations/pricing-page-web-46/) (Web) - [Bramble](https://kombai.com/gallery/inspirations/pricing-page-web-108/) (Web) - [Marlow](https://kombai.com/gallery/inspirations/pricing-page-web-120/) (Web) ## Pricing table vs similar components | | [Pricing table](https://kombai.com/glossary/pricing-table/) | [Table](https://kombai.com/glossary/table/) | [Feature section](https://kombai.com/glossary/feature-section/) | [CTA band](https://kombai.com/glossary/cta-band/) | |---|---|---|---|---| | Shows | Plans, prices and what each includes | Rows of data in columns | What the product does | One message and one button | | Asks people to | Pick a plan | Scan, sort or compare | Read and explore | Take one next step | | Best for | Pricing pages and upgrade prompts | Records, specs and reports | Explaining a product | Closing a landing page | ## Build notes - Build the billing switch as a labeled radio group. Arrow keys then move between Monthly and Yearly. - Give each plan a heading and its features a real list, so assistive tech can jump from plan to plan. - Mark the recommended plan with a text badge like "Most popular", not with color alone. - Name each button for its plan, like "Choose Studio", so it still makes sense out of context. - Show yearly prices per month and say how they are billed, like "$10 a month, billed $120 yearly". - For a full comparison, use a with th scope="col" for plans and th scope="row" for features. ## FAQ ### How many plans should a pricing table show? Three is the most common on web pricing pages in the Kombai gallery, followed by two and four. Mobile paywalls often show just two: yearly and monthly. Past four plans the choice gets hard to scan, so move niche plans behind a link. ### Should the billing switch default to monthly or yearly? Default to the period most people buy. If you lead with yearly, show the per-month figure and the billed total together, like "$10 a month, billed $120 yearly", so the charge at checkout is no surprise. ### Should one plan be highlighted? Yes, when one plan fits most people. Raise it, outline it or give it a "Most popular" badge, and highlight only one. Put the recommendation in text, so it does not rely on color alone. ### What's the difference between a pricing table and a comparison table? A pricing table is the row of plan cards with prices and the main features. A comparison table is the longer grid below it, with every feature as a row and a tick or a cross for each plan. ## Related terms - [Segmented control](https://kombai.com/glossary/segmented-control/) - [Table](https://kombai.com/glossary/table/) - [Card](https://kombai.com/glossary/card/) - [FAQ section](https://kombai.com/glossary/faq-section/) ## References - [WAI-ARIA Authoring Practices: Radio group pattern](https://www.w3.org/WAI/ARIA/apg/patterns/radio/) - [W3C WAI tables tutorial: Tables with two headers](https://www.w3.org/WAI/tutorials/tables/two-headers/) - [WCAG 2.2: Understanding use of color](https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html) - [W3C WAI page structure tutorial: Headings](https://www.w3.org/WAI/tutorials/page-structure/headings/)