Contents

Label

The words on the button.

Where to find it
Labelled Label 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 what the button says. A button is read out of context more often than any other element on a page — people scan for the thing to click rather than reading the sentence above it — so the words here are doing more work than their length suggests.

Say what happens next, from the visitor's point of view. "Start free trial" tells someone what they are about to get. "Submit" tells them nothing, and "Click here" tells them less than nothing, because it describes the mouse rather than the outcome.

Like most settings, it can hold different words per device size. That is worth reaching for when a phone is too narrow for the full phrase — "Start your free trial" on desktop, "Start free trial" on a phone — but most buttons want the same words everywhere.

Clearing the label entirely is how you make an icon-only button. That is a deliberate choice rather than an empty field, and it comes with an obligation described below.

When you would use it

  • Every button, as the first thing you set after dropping one on the canvas.
  • Shortening a call to action that wraps awkwardly on phones.

How to change it

  1. Click the button on the canvas.
  2. In the Modify drawer, open "Selected Component", then "Label".
  3. Type the words. The canvas updates as you go.
  4. Uncheck "Same for all device resolutions" if you want shorter wording 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

  • A button with no label and no icon is an empty box that is still clickable. If you clear the label, set an icon.
  • An icon-only button is silent to a screen reader unless it is given a name. The symbol is hidden from assistive technology on purpose, so the button needs a written label somewhere for the visitor who cannot see it.
  • Long labels wrap rather than being cut off, which is deliberate — translated text is often much longer than English, and a button that clips its own words is worse than one that grows a line.
  • Font, size, weight, and colour are not set here. The preset supplies them, and Column Styles override the preset.

Related settings

Where to go next