Compact Segmented Tab Control CTA Block for React

Edit the PLANS array at the top of the file. Each plan has its label, its price per month, the months each payment covers and the value that identifies it. The first plan is the list price: every saving compares the others with it. The "Billed" line, the payment amount and the saving are computed from those numbers, and the saving is rounded down so the bar never promises more than the price delivers. Add a fourth plan by adding an entry: the segment and the line grow with the data.

The Upgrade button is a real link, so point its href at your checkout and add the plan to it, for example /checkout?plan=pro&billing=quarterly; the chosen plan's value is what you want. It's a ShineButton with render set to an a element and nativeButton={false}. The link's accessible name carries the plan, as in "Upgrade, billed quarterly".

Yes. The segment is a radio group named "Billing period": Tab reaches the chosen period and the arrow keys move and choose. The price rolls visually, but its value stays in text for screen readers, and one polite live region says the new plan after a change, for example "Quarterly: $15 per month. Billed $45 every 3 months, 21% less than monthly." Nothing is announced while the page loads. The headline is the block's h2.

The price's digits are tabular, and the three "Billed…" lines share one grid cell: the longest sets its width and height, and the two that aren't chosen are hidden from sight and from screen readers. Switching only changes which one shows.

Below the md breakpoint the band stacks: the headline and price, a rule, then the segment across the full width and the button across the full width. From md it's one row split by the divider, with the headline taking the space left over, so it holds its shape down to a 320 px screen.

The segment's highlight slides to the chosen period and the price's digits roll. With reduced motion set, the highlight jumps and the digits change in place, and the Shine Button's light fades in instead of sweeping.