shadcn.io is not affiliated with official shadcn/ui
Pill Dual Action CTA Block for React
A band call to action: the saving of paying yearly beside one pill split into two linked halves (monthly in outline, yearly on the Shine Button), with a closing row of three figures worked out from the two prices.
Installation
Overview
A closing band that asks one question: how do you want to pay? For React with Base UI. The block sits on the page's spine: two side rails at the page column and one top rule with a + mark on each crossing, so it joins the blocks above and below it. The headline names what yearly billing keeps for the customer ("Switch Ledgerly to annual and keep $120") and one sentence gives the monthly equivalent. At the end of the band sits a single pill split into two links, "Monthly" and "Yearly, save 34%", each with its monthly cost; the yearly half is the Shine Button and the monthly half is outlined. Nothing toggles: each half is a link to its own checkout. A closing band of three cells under a rule shows the year paid monthly (struck), the year paid at once and what you keep, all worked out from the two prices. On phones the pill goes under the text at full width and the cells stay in one row. It's built from Button, Button Group and Shine Button, with CSS transitions for the entrance. For subscriptions where most visitors should pick yearly but some need monthly.
FAQ
Where do the savings and the percentage come from?
From the two prices at the top of the file, MONTHLY_PRICE and YEARLY_PRICE, and nowhere else. The saving is twelve monthly payments minus the yearly price, the percentage is that saving over twelve monthly payments rounded down in whole numbers, and the yearly price per month is the yearly price over twelve. Change either price and the headline, the sentence, the pill's label and the three cells all follow, with no figure to retype.
Why are both halves links and not a toggle?
Because the block ends the page: each half goes to checkout for that plan, so there is nothing to switch and no state to keep. Point each href at the checkout for its billing period. A toggle that changes prices belongs on a pricing section, such as Billing Toggle.
Each half renders the link it's given with render, with nativeButton={false}.
How do screen readers read the two halves and the figures?
The pill is a labelled group, "Choose how to pay", and each half is a link whose name is its whole text: "Monthly, $29 a month" and "Yearly, save 34%, $19 a month". The three figures are a description list: each label is a term and each amount its value, and the struck amount carries a "Was" label for screen readers. Dollar amounts are marked so they keep their order and symbol in a right-to-left layout.
Can I change the labels or the figures?
The two halves are written out in the markup: change the labels and hrefs there, keeping the yearly half on the Shine Button so the block has one primary action. The row of figures comes from the FACTS list: each entry has a label, a value and a struck flag. A fourth cell needs grid-cols-4.
How does it fit on a phone?
The band stacks: headline and sentence, then the pill at the panel's full width, each half taking half of it with its two lines of text wrapping, so it holds at 320 px without overflowing. The three cells stay in a row with centred, smaller text. In a right-to-left layout the halves swap sides and the rounded ends follow.
Related
- Pro
Dual Action CTA
Slim bandsA band call to action between solid rails with one split button: a Shine Button Get started link joined to a chevron that opens a menu of other routes, beside a headline and a sentence, in your theme.
- Pro
Icon Accent CTA
With a closing bandA band call to action with an accent icon in a hairline frame, a Shine Button and a docs link, and a closing band of three cells that fill in one by one when you press Deploy now.
- Pro
Centered Light Link Secondary CTA
With a closing bandA centred statement for a notes app: a large headline, the Shine Button and a quiet changelog link beneath it whose underline grows from the middle, over a framed roadmap peek.
- Pro
Annual Savings Pricing
Billing switchesThree plans that show what yearly billing saves: each plan's head holds two bars, twelve monthly payments against one yearly payment, with the saving printed in the gap, under a monthly and yearly switch.
- Pro
A centered single-plan hero with a monthly and annual switch under the headline, then one band split by a hairline: the price beside a Shine Button, and six included features.
- Pro
Metadata Tagline CTA
Prices and offersAn event call to action as a band: the name and pitch, the struck standard price beside the early-bird price and a Shine Button, over a closing masthead band of three facts.