The Buttons block allows you to add one or more call-to-action buttons to a page. Each button links to another page, document, or external resource and is typically used to guide visitors toward important actions such as contacting your organization, registering for an event, or learning more about a topic.
Buttons are contained within a Buttons block, which acts as a layout container. Individual buttons inside the container are created using the Button block. This structure allows multiple buttons to be aligned and styled consistently.
Buttons are commonly used within page sections, hero areas, or promotional content where a clear action is needed.
Example
When multiple buttons are used together, the container ensures they maintain consistent spacing and alignment.
Options
Alignment
Expand Buttons Switch Enabled
The Expand Buttons switch is a custom control added by RPS Framework. Its default state is active so the buttons within the block fill the available space to provide a balanced output. Disabling the switch will cause the button widths to be respected and only consume the required space.
Expand Buttons Switch Disabled – Default Justification (Left)
Expand Buttons Switch Disabled – Center Justification
Expand Buttons Switch Disabled – Right Justification
Expand Buttons Switch Disabled – Space Between Justification
Styles
Button Styles
Include Arrow Switch OFF
Include Arrow Switch ON
Block Styles
Default: Gap between buttons
Compact: No gap between buttons
Border Radius
Width
Buttons will always fill the width of their container while attempting to adhere to the set width. For example, if a single button is included within the buttons block and set to 25% wide, it will span the entire width of the block until another button is added. Automatic sizing is active when the button widths in a row do not add up to 100%.
Variations
Horizontal Stack
Vertical Stack
Overrides
The style presets can be overridden using the various style controls. In the following case, each of the buttons have styles applied to make them look the same even though they are using different style presets.
Nesting
Nested Buttons
Buttons may be used within other blocks as a call to action. Note that the focus and hover states cannot be overridden from within the block editor so using a border to create contrast between the button and the background is advised.
Accessibility
- Use clear and descriptive button text such as “Download the Guide” rather than vague text like “Click Here”.
- Ensure button color combinations provide sufficient contrast with surrounding content.
- Avoid using too many buttons in a single group, which can make it difficult for keyboard and screen-reader users to navigate.
Notes
- The Buttons block is a container, while each clickable element is a Button block nested inside it.
- Buttons can link to internal pages, external websites, or downloadable files.
- Use buttons sparingly so that the most important actions remain visually clear.
Documentation
For a detailed overview and usage examples, visit the Buttons Block Documentation.
