Buttons Block

The Buttons block is a container for grouping one or more buttons into a single section. It helps you create clear, consistent calls to action by controlling layout, alignment, and spacing. Buttons are a key tool for guiding users to take action across your site.

Why use the Buttons block

Use the Buttons block when you want to:

  • Encourage users to take a specific action
  • Create high-visibility links that stand out from regular text
  • Group multiple related actions together
  • Control alignment and spacing for one or more buttons

Buttons are one of the most important tools for guiding users through your content.

How to use the block

Start by adding the Buttons block to the page. Learn how to add blocks.

Once the block is added, editors typically:

  • Add one or more Button blocks inside the container
  • Enter text and apply a link for each button
  • Choose layout and alignment settings
  • Apply styles to match the design system

When a Buttons block is added, it includes one Button by default.

To add more buttons:

  • Select the Buttons block and click the + icon within the block
  • Or select a Button, open Options (three-dot menu), and choose Duplicate

Understanding Buttons vs Button

The Buttons block includes two parts:

  • Buttons (parent): Controls layout, alignment, and spacing for the group
  • Button (child): The individual button where you add text, links, and styles

Most layout settings are controlled at the Buttons level, while content and style are set on each Button.

Block toolbar

The block toolbar appears above the selected block.

Buttons block toolbar

  • Change items justification: Align all buttons left, center, right, or spaced.
  • Change vertical alignment: Align buttons to the top, middle, or bottom.
  • Block width: Control how wide the button group appears

Button block toolbar

  • Styles: Change the button style (also available in the Styles tab)
  • Text alignment: Align text within the button
  • Link: Add or edit the button link
  • Bold / Italic: Apply basic text formatting

Block settings

Block settings appear in the right sidebar while the block is selected. The available settings will depend on if a Buttons or Button block is selected.

Buttons block settings

Justification

Controls horizontal alignment of all buttons. This setting is also available in the toolbar.

Orientation

Controls how multiple buttons are displayed:

  • Horizontal (inline): Buttons appear side by side
  • Vertical (stacked): Buttons appear one above the other

Allow to wrap to multiple lines

When using horizontal layout, this controls how buttons behave when space is limited. In most cases, this should remain enabled for better responsiveness.

  • Enabled: Buttons wrap to a new line
  • Disabled: Buttons compress to fit on one line

Button block settings

Width

Sets how wide the button can be relative to its container (25%, 50%, 75%, or 100%). This is useful for creating larger, more prominent buttons.

Block styles

In the Styles tab of the right sidebar, you can adjust visual appearance.

Buttons block styles

Dimensions

  • Padding: Space inside the block
  • Margin: Space outside the block
  • Block spacing: Controls space between buttons. Block spacing is especially important when working with multiple buttons.

Button block styles

Styles

These styles are intended to maintain consistency across the site and will be styled to match your site’s design system. Common button styles include:

  • Default: Solid background
  • Outline: Border with no background
  • Ghost: Minimal, text-like button

Text color

In some cases, text color can be adjusted. However, predefined styles are usually preferred to maintain design consistency.

Shadow

Adds a drop shadow to the button. Use sparingly for subtle emphasis.

Accessibility and content structure

Buttons are interactive elements, so clarity and intent matter.

Write clear, specific labels

Each button should clearly communicate what will happen. Avoid vague labels like “Click here” or repeated “Read more” buttons. Instead, use descriptive text like: “Download the report”, “View pricing plans”, or “Contact our team”.

Use buttons for actions, not navigation alone

Buttons should highlight important actions. For standard navigation within text, use links instead.

Avoid repetition

If multiple buttons appear on a page, make sure each one has a distinct purpose and label.

Tips for editors

Always add a link

Buttons should always include a link. Without one, they appear interactive but don’t do anything.

Use consistent styles

Stick to a small set of button styles to maintain a cohesive look and feel across the site.

Keep button text concise

Short, action-oriented labels are easier to scan and understand.

Be mindful of spacing

Use Block spacing to create comfortable space between buttons, especially when using multiple actions.

  1. WordPress.org Buttons block documentation – Please note that your implementation may include customizations that affect available settings or behavior.