Buttons
📖 Overview
The Buttons block allows users to add one or more call-to-action buttons in a flexible layout. Each button can be individually styled and optionally include an icon.
✏️ Content Options
Buttons are managed via a repeater field. Use the “Add Button” button to add as many buttons as needed. Each button renders the Button component.
| Field | Type | Required | Description |
|---|---|---|---|
| Button Link | Link | Yes | The URL, text, and target for the button |
| Button Style | Select | No | Choose the visual style of the button: Primary, Secondary, or Tertiary |
| Button Icon | Select | No | Optionally add an icon to the button |
⚙️ Settings Options
| Setting | Type | Default | Description |
|---|---|---|---|
| Align Buttons Center? | Toggle | Off | Align the buttons to the center of the block |
| Align Buttons Center on Mobile? | Toggle | Off | Align the buttons to the center of the block on mobile devices only |
🎨 CSS Variables
The following CSS variables can be configured to customise the block’s appearance:
| Variable | Default Value |
|---|---|
--block-buttons-gap |
var(--spacing-l) |
Button Component CSS Variables
Each button uses the Button component, which has the following CSS variables:
| Variable | Default Value |
|---|---|
--component-button-icon-height |
var(--icon-btn) |
--component-button-icon-width |
var(--icon-btn) |
--component-button-icon-only-padding |
1.2rem 1.3rem 1.4rem |
--component-button-icon-only-width |
var(--height-button) |
| Primary Style | |
--component-button-primary-background |
var(--colour-rgb-brand-1) |
--component-button-primary-background-hover |
var(--colour-rgb-brand-1-80) |
--component-button-primary-border |
var(--colour-rgb-brand-1) |
--component-button-primary-colour |
var(--colour-white) |
| Secondary Style | |
--component-button-secondary-background |
var(--colour-rgb-brand-2) |
--component-button-secondary-background-hover |
var(--colour-rgb-brand-2-60) |
--component-button-secondary-border |
var(--colour-rgb-brand-2) |
--component-button-secondary-colour |
var(--colour-black) |
| Tertiary Style | |
--component-button-tertiary-background |
transparent |
--component-button-tertiary-background-hover |
transparent |
--component-button-tertiary-border |
var(--colour-black) |
--component-button-tertiary-colour |
var(--colour-black) |
Note: Each style also has -hover and -active variants for background, border, and colour.