Skip to main content

Button block

What is the Button block for?

A button has one job: make the next step unmistakable. Use a Button when the surrounding content has already done the explaining and the visitor can now act. The label should make it clear what happens after the click.

Two buttons side by side

Turn on Show a second button to add a second button to a Button block, just like in the heroes: set the Secondary link destination and its label, choose the Secondary action style (Text link or Button), and under Buttons whether they sit Side by side or One under the other. The block’s alignment applies to the pair.

Until now this took two Button blocks, one below the other, and the two buttons never shared a row. If both destinations matter equally, make both of them buttons. If the second is just more information, a text link is enough, as in the sample below.

Where does the button start? A standalone button starts in line with the text column. To make it wider, choose Full width or Edge to edge under the block’s Width setting.

Describe the next step on the button. “Request a quote”, “Download the guide” or “See pricing” says more than “Click here”. Give the button enough contrast to be easy to spot, but do not let it compete with the page's main message.

What can you configure in the Button block?

This is deliberately simple: the key decisions are the label, destination and visual emphasis.

Button label

Short action copy that tells visitors what will happen after they click.

Destination

Link to an internal page, another content item or an external URL.

Alignment

Align the button left, centre or right to fit the rhythm of the surrounding content.

Button colours

Set the button background and label colour independently.

Background and width

Give the block its own background and section width, plus Readable, Wide or Full content width.

Visibility

Limit the CTA by device or time window when the action is only relevant in a particular situation.

ONE BUTTON, ONE DECISION

Do not write “Continue”. Say what comes next.

A good CTA is specific, appears at the right moment, and leads to a screen that delivers exactly what the label promised.