shadcn.io is not affiliated with official shadcn/ui
Left Right CTA with Eyebrow Pill Block for React
A card-in-card call to action that follows your theme: a headline with a quiet outline pill that links to a customer story, one sentence, and the Shine Button with an outline action at the end.
Installation
Overview
An enterprise call to action for React with Base UI, for a team workspace called Keel. A muted shell with + marks on its corners holds a raised panel that follows your theme. The headline sits at the start with a quiet outline pill beside it: a status dot, "Read Tidewater's story" and an arrow, in sentence case, linking to a customer story. One sentence follows, then the Shine Button "Contact sales" and an outline "See plans" at the end. It's built from Announcement, Status, Guides, Shine Button and Button with your theme's tokens, so the panel is light on a light page and dark on a dark one. Use it on a pricing page's last section or as a contact-sales band, where a story is the best reason to get in touch.
FAQ
How do I change the pill?
Edit the pill's text and its href. The text is the whole link, one line that ends in an ellipsis on a narrow screen, so write it as words that make sense on their own, such as "Read Tidewater's story". The dot and the arrow are decoration, hidden from screen readers; the arrow flips in a right-to-left layout. There is no uppercase eyebrow: the pill is quiet and sits with the headline, not above it.
Where do the links go?
The pill and both buttons are links (href="#"): point the pill at the story, See plans at your pricing and Contact sales at your sales form.
Each button renders the link it's given with render, with nativeButton={false}.
What is the Shine Button?
The one primary control in the block. A band of light sweeps across it once when the pointer arrives, it takes keyboard focus or it's pressed; with reduced motion the light fades in where it stands. The outline button beside it is the quieter second choice.
Related
- Pro
Left Right Row CTA
Slim bandsThe baseline left-right call to action: a split between solid rails with a headline and one line at the start and, past a divider, a tinted cell at the end that holds the Shine Button over an outline action.
- Pro
Inset Announcement Badge CTA
Card in cardA card-in-card call to action for a code editor's AI completion: the headline and one sentence at the start, a linked announcement pill and a Shine Button at the end, in a muted frame with + marks on its corners.
- Pro
Compact Left Right CTA
Prices and offersA slim renewal band between solid rails with a Shine Button and an outline link on the end side, and a closing band of three cells that sets the two prices and the saving side by side.
- Pro
Left Right CTA with Live Status Pill
Trust and securityA band call to action between solid rails: a headline, a sentence and a pulsing status pill that opens a popover of four services, with the Shine Button and an outline action at the end.
- Pro
Left Right CTA with Compliance Badges
Trust and securityA split call to action between solid rails: the pitch, a Shine Button and an outline link at the start, and four certification cells on shared hairlines at the end whose marks are stamped on one after another.
- Pro
Pill Dual Action CTA
Prices and offersA 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.