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. They are output from the theme configuration (see assets/scss/configuration.scss and assets/scss/mixins/_root-vars.scss).
Block
| Variable | Default Value |
|---|---|
--block-buttons-gap |
var(--spacing-l) |
Button Component
Each button uses the Button component, which has the following CSS variables.
Shared (all styles)
| Variable | Default Value |
|---|---|
--component-button-icon-height |
var(--icon-sml) |
--component-button-icon-width |
var(--icon-sml) |
--component-button-icon-only-padding |
1.2rem 1.3rem 1.4rem |
--component-button-icon-only-width |
var(--height-button) |
Primary style
| Variable | Default Value |
|---|---|
--component-button-primary-background |
var(--colour-brand-1-base) |
--component-button-primary-background-hover |
var(--colour-brand-1-30) |
--component-button-primary-background-focus |
var(--colour-brand-1-30) |
--component-button-primary-background-active |
var(--colour-brand-1-40) |
--component-button-primary-background-disabled |
var(--colour-brand-1-10) |
--component-button-primary-border |
var(--colour-brand-1-base) |
--component-button-primary-border-hover |
var(--colour-brand-1-30) |
--component-button-primary-border-focus |
var(--colour-brand-1-30) |
--component-button-primary-border-active |
var(--colour-brand-1-40) |
--component-button-primary-border-disabled |
var(--colour-brand-1-10) |
--component-button-primary-colour |
var(--colour-brand-1-10) |
--component-button-primary-colour-hover |
var(--colour-brand-1-10) |
--component-button-primary-colour-focus |
var(--colour-brand-1-10) |
--component-button-primary-colour-active |
var(--colour-brand-1-10) |
--component-button-primary-colour-disabled |
var(--colour-brand-1-30) |
| Primary (dark mode) | |
--component-button-primary-background-dark |
var(--colour-brand-1-10) |
--component-button-primary-background-hover-dark |
var(--colour-brand-1-30) |
--component-button-primary-background-focus-dark |
var(--colour-brand-1-30) |
--component-button-primary-background-active-dark |
var(--colour-brand-1-40) |
--component-button-primary-background-disabled-dark |
var(--colour-brand-1-10) |
--component-button-primary-border-dark |
var(--colour-brand-1-10) |
--component-button-primary-border-hover-dark |
var(--colour-brand-1-30) |
--component-button-primary-border-focus-dark |
var(--colour-brand-1-30) |
--component-button-primary-border-active-dark |
var(--colour-brand-1-40) |
--component-button-primary-border-disabled-dark |
var(--colour-brand-1-10) |
--component-button-primary-colour-dark |
var(--colour-brand-1-base) |
--component-button-primary-colour-hover-dark |
var(--colour-brand-1-10) |
--component-button-primary-colour-focus-dark |
var(--colour-brand-1-10) |
--component-button-primary-colour-active-dark |
var(--colour-brand-1-10) |
--component-button-primary-colour-disabled-dark |
var(--colour-brand-1-30) |
Secondary style
| Variable | Default Value |
|---|---|
--component-button-secondary-background |
transparent |
--component-button-secondary-background-hover |
var(--colour-brand-1-10) |
--component-button-secondary-background-focus |
var(--colour-brand-1-10) |
--component-button-secondary-background-active |
var(--colour-brand-1-20) |
--component-button-secondary-background-disabled |
var(--colour-brand-1-10) |
--component-button-secondary-border |
var(--colour-brand-1-base) |
--component-button-secondary-border-hover |
var(--colour-brand-1-30) |
--component-button-secondary-border-focus |
var(--colour-brand-1-30) |
--component-button-secondary-border-active |
var(--colour-brand-1-20) |
--component-button-secondary-border-disabled |
var(--colour-brand-1-10) |
--component-button-secondary-colour |
var(--colour-brand-1) |
--component-button-secondary-colour-hover |
var(--colour-brand-1-40) |
--component-button-secondary-colour-focus |
var(--colour-brand-1-40) |
--component-button-secondary-colour-active |
var(--colour-brand-1-base) |
--component-button-secondary-colour-disabled |
var(--colour-brand-1-30) |
| Secondary (dark mode) | |
--component-button-secondary-background-dark |
transparent |
--component-button-secondary-background-hover-dark |
var(--colour-brand-1-30) |
--component-button-secondary-background-focus-dark |
var(--colour-brand-1-30) |
--component-button-secondary-background-active-dark |
var(--colour-brand-1-20) |
--component-button-secondary-background-disabled-dark |
var(--colour-brand-1-10) |
--component-button-secondary-border-dark |
var(--colour-brand-1-10) |
--component-button-secondary-border-hover-dark |
var(--colour-brand-1-30) |
--component-button-secondary-border-focus-dark |
var(--colour-brand-1-30) |
--component-button-secondary-border-active-dark |
var(--colour-brand-1-20) |
--component-button-secondary-border-disabled-dark |
var(--colour-brand-1-10) |
--component-button-secondary-colour-dark |
var(--colour-brand-1-10) |
--component-button-secondary-colour-hover-dark |
var(--colour-brand-1-10) |
--component-button-secondary-colour-focus-dark |
var(--colour-brand-1-10) |
--component-button-secondary-colour-active-dark |
var(--colour-brand-1-base) |
--component-button-secondary-colour-disabled-dark |
var(--colour-brand-1-30) |
Tertiary style
| Variable | Default Value |
|---|---|
--component-button-tertiary-background |
transparent |
--component-button-tertiary-background-hover |
transparent |
--component-button-tertiary-background-focus |
transparent |
--component-button-tertiary-background-active |
transparent |
--component-button-tertiary-background-disabled |
transparent |
--component-button-tertiary-border |
var(--colour-brand-1-base) |
--component-button-tertiary-border-hover |
var(--colour-brand-1-30) |
--component-button-tertiary-border-focus |
var(--colour-brand-1-30) |
--component-button-tertiary-border-active |
var(--colour-brand-1-20) |
--component-button-tertiary-border-disabled |
var(--colour-brand-1-20) |
--component-button-tertiary-colour |
var(--colour-brand-1-base) |
--component-button-tertiary-colour-hover |
var(--colour-brand-1-30) |
--component-button-tertiary-colour-focus |
var(--colour-brand-1-30) |
--component-button-tertiary-colour-active |
var(--colour-brand-1-20) |
--component-button-tertiary-colour-disabled |
var(--colour-brand-1-20) |
| Tertiary (dark mode) | |
--component-button-tertiary-background-dark |
transparent |
--component-button-tertiary-background-hover-dark |
transparent |
--component-button-tertiary-background-focus-dark |
transparent |
--component-button-tertiary-background-active-dark |
transparent |
--component-button-tertiary-background-disabled-dark |
transparent |
--component-button-tertiary-border-dark |
var(--colour-brand-1-10) |
--component-button-tertiary-border-hover-dark |
var(--colour-brand-1-10) |
--component-button-tertiary-border-focus-dark |
var(--colour-brand-1-10) |
--component-button-tertiary-border-active-dark |
var(--colour-brand-1-20) |
--component-button-tertiary-border-disabled-dark |
var(--colour-brand-1-20) |
--component-button-tertiary-colour-dark |
var(--colour-brand-1-10) |
--component-button-tertiary-colour-hover-dark |
var(--colour-brand-1-10) |
--component-button-tertiary-colour-focus-dark |
var(--colour-brand-1-10) |
--component-button-tertiary-colour-active-dark |
var(--colour-brand-1-20) |
--component-button-tertiary-colour-disabled-dark |
var(--colour-brand-1-20) |
Note: Default values are defined in the component and block maps in assets/scss/configuration.scss. The root-vars mixin outputs them as --component-* and --block-* custom properties. The Button component also supports focus and disabled states in addition to hover and active; dark-mode variants are applied inside .layout--dark (or equivalent).