Metric Toggle Tiles Pricing Block for React

Edit the top of the file. OPTIONS lists the switch's labels, and METRICS has one entry per quota: its label, its unit and a quotas object with one entry per plan, each with the figure's value, an optional suffix for compact figures (the K in 500K) and a caption that says it in words. PLANS holds each plan's name, tagline, starting price, cta, href, features and popular. To add a quota, add its id to MetricId, an option and a metric entry.

Each call to action is a real link to its plan's href. It is a ShineButton with render set to an a element and nativeButton={false}. Point the paid plans at your checkout with the plan in the query; the quota the visitor was looking at isn't sent, because every plan scales on all four.

The quota switch is a radio group named "Quota": arrow keys move and select, and the figures change as you go. The big number is hidden from screen readers, because the caption under it says the same in words ("Up to 10 million pushes a month"); the metric's label above it is read first. Plans are h3 headings, prices are read as "per month" and each button names its plan.

The quota switch becomes a two-by-two grid. The tiles sit in a horizontal scroller that snaps to each tile, opens on Flare and lets the next tile peek in; the dots under it are buttons named "Show the Flare tile". The figure's unit goes on its own line and the caption keeps room for two lines, so switching the quota never moves the buttons.

The entrance and the fade on each label and caption are switched off, so the text changes at once. Nothing else on the page moves.

Use it when plans differ mainly in a few numeric limits and buyers care about different ones: the switch lets each of them see the limit they care about at display size. A feature table is better when plans differ in many yes-or-no features.