Contents

Button Style

The button's ready-made look, chosen as a variant, a tone, and a size.

Where to find it
Labelled Button Style in the "Selected Component" section of the Modify drawer.
Offered by
The Button component. Other components do not have this setting.
Per device
Yes — you can set one value for every screen, or separate values for phone, tablet, and desktop.

In plain English

This is the setting that makes a button look like a button without you having to style one. It is three separate choices rather than a single list of named styles, which is what keeps the picker to fourteen swatches instead of the hundred combinations those three axes would otherwise produce.

Variant is how much visual weight the button carries — a filled solid, a tinted soft, a bordered outline, a bare ghost, or something that reads as a plain link. Tone is what the button means, and the colour follows from it: brand for ordinary actions, danger for deleting, success for confirming, neutral for things that carry no weight. Size sets the text size and the padding together, so a button stays in proportion as it grows.

Every swatch in the picker is a real button drawn by the same code that renders the published page, so what you click is what a visitor sees. The size swatches are drawn at their actual sizes for the same reason.

The important thing to understand is what happens when you also set a colour or a border on the column. The preset is a starting point, not a rule. Anything you set under Selected Column wins, and everything you leave alone keeps the preset's value. That is why there is no colour or border setting here — those live on the column, where they already exist for every other component, and having them in two places would only raise the question of which one applies.

When you would use it

  • Immediately after dropping a button, to say whether it is the main action or a secondary one.
  • Making a second button quieter so the primary one stands out — outline or ghost beside a solid.
  • Marking a destructive action with the danger tone.
  • Enlarging the single most important button on a landing page.

How to change it

  1. Click the button on the canvas.
  2. In the Modify drawer, open "Selected Component", then "Button Style".
  3. Click a swatch in each of the three rows — Variant, Tone, and Size.
  4. Use "Reset to default" to go back to the standard solid brand medium button.
  5. Uncheck "Same value for all resolutions" to use a different style on phones.
One value, or one per device? Every input in this setting sits under a “Same value for all resolutions” checkbox. Leave it checked for a single value everywhere, or uncheck it to give phones, tablets, and desktops their own. How per-device values work.

Watch out for

  • One solid button per section. When everything is solid, nothing reads as the main action.
  • The ghost variant is nearly invisible until it is hovered, which is the point in a dense toolbar and a mistake for a page's main call to action.
  • Anything set under Selected Column overrides the preset. If a preset seems to do nothing, look for a background or border set on the column.
  • The danger tone is a promise to the visitor that something is destructive. Using it for emphasis on a harmless button teaches people to ignore it.
  • Tone colours can be repointed at your own brand palette site-wide by setting CSS variables in the embedding page, which is usually better than overriding colours button by button.

Related settings

Where to go next