Button

One call-to-action. Buttons almost always live inside a Buttons block, which handles how a group of them is arranged and aligned.

The style you pick comes straight from the site style guide, so buttons look the same everywhere in the theme. Colours are not configurable — see Why there’s no colour picker below.

Settings

Setting	What it does
Button label	The text on the button. Defaults to “Button” if left empty.
What the button does	Go to a link (default) or Open the quiz. Choosing “Open the quiz” hides the URL field and turns the button into a quiz trigger.
Quiz section ID	Only shown when the action is “Open the quiz”. Which quiz to open — leave it at quiz-modal unless a developer says otherwise.
Button URL	Where it links. Leave empty and the button still renders, but goes nowhere. Hidden when the action is “Open the quiz”.
Open in new tab	Opens the link in a new browser tab. Hidden when the action is “Open the quiz”.
Hide arrow	Removes the trailing arrow. Some styles show an arrow by default — this turns it off.
Button style	Which style-guide variant to use. See the table below.
Block ID	Optional anchor ID, for linking directly to this button.

Opening the quiz

Set What the button does to Open the quiz and the button launches the product-recommendation quiz instead of navigating anywhere. Use this to put a “Take the quiz” call to action wherever a button already fits — a hero, a product grid, a landing page — without the one-line prompt that the Quiz Trigger block renders.

Caution

The page still needs the quiz itself. Add the Quiz Modal section to a section group (usually the footer group) or the button will do nothing when clicked. The Quiz Modal section renders nothing visible on its own — it’s the content the dialog loads.

The button becomes a real <button> rather than a link, so screen readers announce it correctly and it won’t show a nowhere-link in the status bar.

Button styles

Style	Looks like	Use it for
Primary (filled)	Solid dark green pill, white text, arrow	The main action on a section — “Shop all formulas”
Secondary (outline)	Outlined pill, no fill	The second option beside a primary button — “Take the quiz”
Tertiary (outline, small)	Outlined pill, smaller text	Lower-priority actions, tighter layouts
Small (outline, extra small)	Outlined pill, smallest	Compact spots like cards
Text link (underlined)	Underlined text with an arrow, no pill	Inline “Read the study”-style links
Text link (no underline)	Plain text, underlines on hover	Quieter links where an underline would be noisy

Primary and the underlined text link show an arrow by default. The outline styles don’t. Hide arrow overrides whichever default applies.

Add-to-cart buttons aren’t in this list

The full-width add-to-cart and compact “Add” buttons are set automatically by the product components. They aren’t merchant-selectable, because they’re tied to cart behaviour rather than being general-purpose CTAs.

Why there’s no colour picker

Buttons adapt to their background on their own. Any section set to a dark background flips its buttons to the light treatment automatically — a secondary button switches from a dark-green outline to a white one, and text links render white.

That’s why there’s no text-colour or colour-override setting: picking “white text” by hand used to be the only way to make a button readable on a dark hero, and it would then break if the background changed. Now the background drives it.

Buttons look wrong on a dark section?

Check the section’s background setting rather than the button. The button takes its cue from there. If a section’s background is dark but the buttons still render dark, the section’s background colour needs setting properly.

Tips

• One primary per section. If everything is a filled button, nothing reads as the main action. Pair one primary with one secondary.
• Write the label as an action — “Shop all formulas” beats “Click here”, and it’s what screen-reader users hear out of context.
• Only use “Open in new tab” for genuinely external destinations. Opening in-site links in new tabs is disorienting, especially on mobile.