Usage Profile Pricing Block for React

Edit CATEGORIES (a name, an icon, a rate per unit and the note that states it) and PROFILES (a name, a tagline, a usage count for each category and its features). Each cost is the usage times the rate, rounded to a whole dollar; the total is the sum of those, and each share is the cost over the total, so the bar, the rows and the headline always agree. Add a profile by adding an entry; the switch builds itself from the array.

It is a row of spans with flex-grow set to each cost, so the segments always fill the bar and resize with a CSS transition when the profile changes. Its three tones are foreground at 100%, 50% and 20%, repeated as a dot beside each cost line. The bar is an image to assistive technology with a text alternative that lists each share, "Cost split: Transcription 62%, Speaker labels 21%, Summaries 17%".

No. The button's label and the list of included features each hold every profile's text in one grid cell and show only the current one, so the panel keeps the size of the longest label and the tallest list. The number columns use tabular figures and fixed widths.

The button is a real link. It's a ShineButton with render set to an a element and nativeButton={false}. Add the chosen profile to the query, for example /signup?profile=standard, so your onboarding can start from the right quota.

The switch is a radio group named "Usage profile". A polite live region reads one message after each change: "Standard profile: estimated $58 per month". The cost lines are a list, and "/mo" is read as "per month".

When your buyers recognise themselves by what they do, a podcast, a support team, a call centre, more than by a number. A slider suits buyers who know their volume; profiles suit those who don't, and they keep the page's answer to three clear numbers.