Button
Give visitors a clear next step, such as opening your contact page or booking link.
Code name: Button · Category: Navigation
Registered in the live renderer. Website context and the limitations below still apply.
When to use it
Use one clear button for the main action in a section. A label such as “Book a consultation” tells visitors what happens next.
In the editor
- Select the button and change its label.
- Set the destination to an existing page or a verified external link.
- Choose contained, outlined or text styling and test the destination in preview.
Example
This example uses illustrative content. Media placeholders must be replaced with your own assets; data-backed blocks need the normal website context.
<Button text="Book a consultation" navigatePathname="/contact" variant="contained" />Behaviour and limitations
- Change the label through text. Button does not use children for its label.
- navigatePathname is the destination; hrefTarget is the browsing context. Preserve the target when only changing the URL.
- actions is an editor control group. Set idAnchorName and plausibleGoal as individual properties, not an actions object.
Property reference
Types below describe the editor controls and known choices, not every value accepted by the renderer. A renderer default is extracted from its parameter; an editor-only default does not prove the runtime default. “Not declared here” does not mean required. Preserve omitted values unless the requested edit needs them.
| Property | Editor value type | Default evidence | Guidance |
|---|---|---|---|
text | string | "Try for free" (renderer) | Text. See the usage notes for this block. |
navigatePathname | string | "" (renderer) | The link destination. Use an existing page or a verified URL. |
hrefTarget | See guidance | Not declared here | Link browsing context, such as _self or _blank. It is separate from the destination. |
fullWidth | boolean | false (renderer) | Full width. See the usage notes for this block. |
variant | "contained", "outlined", "text" | "contained" (renderer) | Variant. See the usage notes for this block. |
colorVariant | "primary/secondary", "white/black", "primary", "secondary" | "primary/secondary" (renderer) | Color variant. See the usage notes for this block. |
size | "small", "medium", "large" | "medium" (renderer) | Size. See the usage notes for this block. |
iconButton | boolean | false (renderer) | Icon Button. See the usage notes for this block. |
noTextPadding | boolean | false (renderer) | Remove text padding. See the usage notes for this block. |
startIcon | string | Not declared here | Start icon. See the usage notes for this block. |
endIcon | string | Not declared here | End icon. See the usage notes for this block. |
align | "left", "center", "right" | "center" (renderer) | Align. See the usage notes for this block. |
actions | See guidance | Not declared here | Editor group only. Set its individual supported properties; do not emit an actions object. |
alignVertical | See guidance | Not declared here | Vertical alignment within the surrounding layout. |
backgroundColor | string | Not declared here | Background colour. Theme-derived appearance can still depend on the surrounding section. |
textColor | string | Not declared here | Text color. See the usage notes for this block. |
spacing | object | Not declared here | An object of spacing settings. Preserve existing responsive values when changing a single setting. |
animationType | "none", "fade-up", "fade-down", "fade-left", "fade-right", "flip-up", "flip-down", "flip-left", "flip-right", "zoom-in", "zoom-left", "zoom-right" | "" (renderer) | Entrance animation setting. Use a supported editor value; preserve it for unrelated edits. |
idAnchorName | string | "" (renderer) | ID (anchor). See the usage notes for this block. Editor group: actions. |
plausibleGoal | string | Not declared here | Goal Name. See the usage notes for this block. Editor group: actions. |
css | string | Not declared here | Custom CSS text. Preserve unrelated rules and prefer the dedicated property for supported edits. |
screenList | string | "" (renderer) | Comma-separated device names to hide on: mobile, tablet, desktop. An empty string hides on none. |
