Title: Buttons block
Author: Chandrika Sista
Published: October 8, 2021
Last modified: May 29, 2026

---

# Buttons block

## In this article

 * [Add a Button block](https://wordpress.org/documentation/article/buttons-block/?output_format=md#add-a-button-block)
 * [Block toolbar](https://wordpress.org/documentation/article/buttons-block/?output_format=md#block-toolbar-for-entire-block)
    - [For the entire block](https://wordpress.org/documentation/article/buttons-block/?output_format=md#for-the-entire-block)
    - [For an individual button](https://wordpress.org/documentation/article/buttons-block/?output_format=md#for-an-individual-button)
 * [Block settings](https://wordpress.org/documentation/article/buttons-block/?output_format=md#block-settings-for-entire-block)
    - [Buttons block settings](https://wordpress.org/documentation/article/buttons-block/?output_format=md#block-settings-for-entire-block-2)
    - [Layout](https://wordpress.org/documentation/article/buttons-block/?output_format=md#layout)
    - [Color](https://wordpress.org/documentation/article/buttons-block/?output_format=md#color)
    - [Typography](https://wordpress.org/documentation/article/buttons-block/?output_format=md#typography)
    - [Dimensions](https://wordpress.org/documentation/article/buttons-block/?output_format=md#dimensions)
    - [Border](https://wordpress.org/documentation/article/buttons-block/?output_format=md#border)
    - [Advanced](https://wordpress.org/documentation/article/buttons-block/?output_format=md#advanced)
 * [Individual button block settings](https://wordpress.org/documentation/article/buttons-block/?output_format=md#individual-button-block-settings)
    - [Width settings](https://wordpress.org/documentation/article/buttons-block/?output_format=md#width-settings)
    - [Advanced settings](https://wordpress.org/documentation/article/buttons-block/?output_format=md#advanced-settings)
    - [Styles settings](https://wordpress.org/documentation/article/buttons-block/?output_format=md#styles-settings)
 * [Changelog](https://wordpress.org/documentation/article/buttons-block/?output_format=md#changelog)

[ Back to top](https://wordpress.org/documentation/article/buttons-block/?output_format=md#wp--skip-link--target)

[Go to the List of Blocks](https://wordpress.org/documentation/article/blocks/)

Use the Buttons block to add one or more buttons to your page or post. This block
has been available since WordPress 5.4, when the [button block](https://wordpress.org/documentation/article/button-block/)
was deprecated.

## 󠀁[Add a Button block](https://wordpress.org/documentation/article/buttons-block/?output_format=md#add-a-button-block)󠁿

To add the Buttons block to a page, click the** Add block** button to open the block
inserter pop-up window and choose the Buttons block.

![add a buttons block by typing slash and choosing buttons from the list](https://
wordpress.org/documentation/files/2021/10/Screenshot-2026-04-08-at-2.19.58-PM.png)

You can also use the keyboard shortcut /buttons to quickly insert a Buttons block.

[Detailed instructions on adding blocks](https://wordpress.org/documentation/article/adding-a-new-block/)

The Buttons block comes with one individual button block by default. You can customize
the text, link, and style for this button. To add more buttons, click the plus **
Add block** button in the bottom right corner within the Buttons block, and a new
button will appear. Note that the new button will follow the same style as the existing
button.

## 󠀁[Block toolbar](https://wordpress.org/documentation/article/buttons-block/?output_format=md#block-toolbar-for-entire-block)󠁿

To view the block toolbar, click on the block, and the toolbar will be displayed.

Every block comes with unique toolbar icons and blocks specific user controls that
allow you to manipulate the block right in the editor.The Buttons block has a toolbar
for the individual button and a toolbar for the entire block.

### 󠀁[For the entire block](https://wordpress.org/documentation/article/buttons-block/?output_format=md#for-the-entire-block)󠁿

![Buttons block toolbar](https://wordpress.org/documentation/files/2021/10/Screenshot-
2026-04-08-at-2.21.24-PM.png)

The main toolbar for the entire block has the following buttons:

 * Transform to
 * Move controls
 * Change items justification
 * Change vertical alignment
 * Align
 * Options

#### 󠀁[Transform to](https://wordpress.org/documentation/article/buttons-block/?output_format=md#transform-to)󠁿

![Transform controls on buttons block toolbar](https://wordpress.org/documentation/
files/2021/10/Screenshot-2026-04-08-at-2.22.28-PM.png)

Click on the Transform button to convert the Buttons block into a Group, Details
or Columns block.

#### 󠀁[Move tools](https://wordpress.org/documentation/article/buttons-block/?output_format=md#move-tools)󠁿

![Buttons block toolbar block moving tools](https://wordpress.org/documentation/
files/2021/10/moving-Screenshot-2026-04-08-at-2.21.24-PM-copy.png)

Use the block-moving tools to move the Buttons block.

The **drag** or **six dots** icon allows you to freely reposition the block anywhere
within the editor by holding the icon and dragging it to the new location.

You can also use the **arrow icons** to move the block up or down within the group
of nested blocks or when there are multiple blocks.

[Get more information about moving a block within the editor.](https://wordpress.org/documentation/article/moving-blocks/)

#### 󠀁[Align](https://wordpress.org/documentation/article/buttons-block/?output_format=md#align)󠁿

![Buttons block toolbar align options](https://wordpress.org/documentation/files/
2021/10/Screenshot-2026-04-08-at-2.30.04-PM.png)

Use the change alignment tool to align the Buttons block. Choose one of the following
options:

 * None – leaves the block the current size.
 * Wide width – increase the width of the block beyond the content size.
 * Full width – extend the block to cover the full width of the screen.

The “Wide width” and “Full width” alignment settings must be enabled by your WordPress
theme. 

#### 󠀁[Change items justification](https://wordpress.org/documentation/article/buttons-block/?output_format=md#change-items-justification)󠁿

![Buttons block toolbar showing Justification toolbar with Justify items center](
https://wordpress.org/documentation/files/2021/10/justify-Screenshot-2026-04-08-
at-2.37.56-PM-1024x393.png)

The items justification setting allows justifying the buttons to the left, center,
or right. There is also an option to “Space between items”. If it is selected, the
Buttons** **block will be centered with equal spacing between the buttons. 

#### 󠀁[Change vertical alignment](https://wordpress.org/documentation/article/buttons-block/?output_format=md#change-vertical-alignment)󠁿

![Buttons block toolbar change vertical alignment controls with Stretch to fill 
selected](https://wordpress.org/documentation/files/2021/10/align-Screenshot-2026-
04-08-at-2.43.02-PM.png)

Use the change vertical alignment option to align buttons vertically with four possible
options:

 * Align top
 * Align middle
 * Align bottom
 * Stretch to fill 

#### 󠀁[More options](https://wordpress.org/documentation/article/buttons-block/?output_format=md#more-options)󠁿

The [More Options menu](https://wordpress.org/documentation/article/more-options)
represented by **three vertical dots on the far right of the toolbar** gives you
more features such as the ability to duplicate or remove a block.

[Read about these and other settings.](https://wordpress.org/documentation/article/more-options/)

### 󠀁[For an individual button](https://wordpress.org/documentation/article/buttons-block/?output_format=md#for-an-individual-button)󠁿

![Block toolbar for Button block inside a Buttons container block](https://wordpress.
org/documentation/files/2021/10/Screenshot-2026-04-08-at-2.46.33-PM-1024x229.png)

If you select a specific button, a new toolbar will appear with these new options:

 * Change block style
 * Block-moving tools
 * Align block
 * Justification
 * Vertical alignment
 * Align text
 * Link
 * Bold
 * Italic
 * More Rich Text controls
 * Options

#### 󠀁[Change block style](https://wordpress.org/documentation/article/buttons-block/?output_format=md#change-block-style)󠁿

![Change block styles for individual block](https://wordpress.org/documentation/
files/2021/10/Screenshot-2026-04-08-at-2.49.52-PM-1024x375.png)

Use the change block style option to change the style of a particular button. 

#### 󠀁[Link](https://wordpress.org/documentation/article/buttons-block/?output_format=md#link)󠁿

![Button block toolbar link control](https://wordpress.org/documentation/files/2021/
10/link-Screenshot-2026-04-08-at-2.52.43-PM-copy-1024x103.png)

Use the link option to add a link to the button. It’s also possible to set it to
open the link in a new tab

[Read about more link editing options.](https://wordpress.org/documentation/article/link-editing/)

#### 󠀁[Bold and Italics](https://wordpress.org/documentation/article/buttons-block/?output_format=md#bold-and-italics)󠁿

![Button block toolbar with Bold and Italic](https://wordpress.org/documentation/
files/2021/10/bold-Screenshot-2026-04-08-at-2.52.43-PM-copy-1024x103.png)

You can select the text of the block and use the “Bold” option or “Ctrl+B” / “Cmd
+B” on your keyboard to bold it, which is usually heavier than the surrounding text.

You can select the text of the block and use the “Italic” option or “Ctrl+I” / “
Cmd+I” on your keyboard to italicize it, which usually appears slanted to the right.

#### 󠀁[More rich text options](https://wordpress.org/documentation/article/buttons-block/?output_format=md#more-rich-text-options)󠁿

The drop-down menu to the left of the [More options menu](https://wordpress.org/documentation/article/more-options/)
contains a range of additional rich text editing options such as highlighting, inline
code, strikethrough, and more.

[Read about more rich text editing options.](https://wordpress.org/documentation/article/more-text-editing-overview/)

#### 󠀁[More options](https://wordpress.org/documentation/article/buttons-block/?output_format=md#more-options-2)󠁿

The [More Options menu](https://wordpress.org/documentation/article/more-options)
represented by **three vertical dots on the far right of the toolbar** gives you
more features such as the ability to duplicate or remove a block.

[Read about these and other settings.](https://wordpress.org/documentation/article/more-options/)

## 󠀁[Block settings](https://wordpress.org/documentation/article/buttons-block/?output_format=md#block-settings-for-entire-block)󠁿

![The settings button at the top right corner of editor](https://wordpress.org/documentation/
files/2021/10/Screenshot-2026-04-08-at-3.15.59-PM.png)

The block settings panel contains customization options specific to the block. To
open it, select the block and click the **Settings **button next to the **Publish**
button.

When the entire Buttons block is selected, you have the Layout, Typography, Dimensions,
and Advanced customization settings.

### 󠀁[Buttons block settings](https://wordpress.org/documentation/article/buttons-block/?output_format=md#block-settings-for-entire-block-2)󠁿

When the entire Buttons block is selected, you have several settings for customization.

![Buttons Block settings ](https://wordpress.org/documentation/files/2021/10/Screenshot-
2026-04-08-at-3.22.07-PM-376x1024.png)

![Buttons block styles](https://wordpress.org/documentation/files/2021/10/Screenshot-
2026-04-08-at-3.23.53-PM-281x1024.png)

### 󠀁[Layout](https://wordpress.org/documentation/article/buttons-block/?output_format=md#layout)󠁿

The Buttons block provides layout settings to change item justification and orientation.

![Layout settings for the buttons block](https://wordpress.org/documentation/files/
2023/03/image.png)

When a specific button from the Buttons block is selected, you have the Styles, 
Width, Color, Typography, Dimensions, Border, and Advanced customization settings.

[This article provides details about layout settings.](https://wordpress.org/documentation/article/layout-settings-overview/)

### 󠀁[Color](https://wordpress.org/documentation/article/buttons-block/?output_format=md#color)󠁿

The Buttons block provides Color settings options to change the text and background
colors

 [See this guide for more information about changing colors.](https://wordpress.org/documentation/article/colors-settings-overview/)

### 󠀁[Typography](https://wordpress.org/documentation/article/buttons-block/?output_format=md#typography)󠁿

The Buttons block_ _provides typography settings to change the font family, size,
appearance, line height, letter case, letter spacing, and decoration.

[Get more details about changing typography settings.](https://wordpress.org/documentation/article/typography-settings-overview/)

### 󠀁[Dimensions](https://wordpress.org/documentation/article/buttons-block/?output_format=md#dimensions)󠁿

The Buttons block provides dimensions settings options to change padding and margin
size.

[Learn more about dimension controls.](https://wordpress.org/documentation/article/dimension-controls-overview/)

### 󠀁[Border](https://wordpress.org/documentation/article/buttons-block/?output_format=md#border)󠁿

Border settings provide options to control the width and radius for the Buttons 
block.

[Learn more about border settings.](https://wordpress.org/documentation/article/border-settings-overview/)

### 󠀁[Advanced](https://wordpress.org/documentation/article/buttons-block/?output_format=md#advanced)󠁿

The Buttons block provides the following Advanced settings options: HTML anchor,
Additional CSS Class(es), and Styles.

[Learn more about advanced settings](https://wordpress.org/documentation/article/advanced-settings-overview/)

## 󠀁[Individual button block settings](https://wordpress.org/documentation/article/buttons-block/?output_format=md#individual-button-block-settings)󠁿

When an individual button is selected there are several settings and styles you 
can apply.

![Button block settings](https://wordpress.org/documentation/files/2021/10/Screenshot-
2026-04-08-at-3.28.28-PM-287x1024.png)

![Button block styles](https://wordpress.org/documentation/files/2021/10/Screenshot-
2026-04-08-at-3.28.03-PM-271x1024.png)

### 󠀁[Width settings](https://wordpress.org/documentation/article/buttons-block/?output_format=md#width-settings)󠁿

Each button can have its own width setting inside the Button block based on a % 
value.

### 󠀁[Advanced settings](https://wordpress.org/documentation/article/buttons-block/?output_format=md#advanced-settings)󠁿

The Buttons block provides the following Advanced settings options: HTML anchor,
Additional CSS Class(es), HTML element, Link relation, and Styles.

Use the **Link relation** setting to add a `rel` attribute to the button link. This
tells browsers and search engines what the relationship is between your page and
the page you are linking to.

To learn more about common values, such as `nofollow`, `noopener`, and `noreferrer`,
refer to [MDN’s documentation on the rel attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/rel).

[Learn more about advanced settings](https://wordpress.org/documentation/article/advanced-settings-overview/)

### 󠀁[Styles settings](https://wordpress.org/documentation/article/buttons-block/?output_format=md#styles-settings)󠁿

![Button style variations](https://wordpress.org/documentation/files/2021/10/Screenshot-
2026-04-08-at-3.48.59-PM.png)

It’s possible to change the individual button style depending on your theme. Hover
over a particular style to see how a style such as fill or outline will look.

#### 󠀁[Color](https://wordpress.org/documentation/article/buttons-block/?output_format=md#color-2)󠁿

The Button block provides Color settings options to change the text and background
colors

 [See this guide for more information about changing colors.](https://wordpress.org/documentation/article/colors-settings-overview/)

#### 󠀁[Typography](https://wordpress.org/documentation/article/buttons-block/?output_format=md#typography-2)󠁿

The Button block_ _provides typography settings to change the font family, size,
appearance, line height, letter case, letter spacing, and decoration.

[Get more details about changing typography settings.](https://wordpress.org/documentation/article/typography-settings-overview/)

#### 󠀁[Dimensions](https://wordpress.org/documentation/article/buttons-block/?output_format=md#dimensions-2)󠁿

The Button block provides dimensions settings options to change padding and margin
size.

[Learn more about dimension controls.](https://wordpress.org/documentation/article/dimension-controls-overview/)

#### 󠀁[Border & Shadow](https://wordpress.org/documentation/article/buttons-block/?output_format=md#border-shadow)󠁿

Border settings provide options to control the width and radius for the Button block.
You can also apply a shadow.

[Learn more about border & shadow settings.](https://wordpress.org/documentation/article/border-settings-overview/)

## 󠀁[Changelog](https://wordpress.org/documentation/article/buttons-block/?output_format=md#changelog)󠁿

 * Updated 2026-05-25 (props @kjoyner @awetz583)
    - Updated “Advanced” section to refer to new overview page
 * Updated 2026-04-08 (props to @karks88 @zunaid321 @ShatilKhan @lumiblog @karthickmurugan
   @awetz583)
    - Added shadow setting for button block
    - Updated images and video
 * Updated 2025-12-02
    - Added HTML Element under Advanced section (props to @annezazu)
 * Updated 2023-11-21
    - Updated screenshots for 6.4
 * Updated 2023-11-11
    - Updated title in sentence case
 * Updated 2023-06-09
    - Replaced “More rich text options” section with short summary linking to new
      dedicated page for rich text editing options.
 * Updated 2023-03-07
    - Revised formatting for the whole article
    - Updated content and all screenshots for 6.2
 * Updated 2022-11-22
    - Change alignment for images
    - Replaced redundant content
 * Updated 2022-08-18
    - Updated content, screenshots, and videos for 6.0.
    - Added explanation for adding individual buttons and style preservation.
    - Added new block toolbar options.
    - Added images and info for space between items and change vertical alignment.
    - Added details for the block settings sidebar info.
    - Updated info for the More options for the individual button block.
    - Removed Text Color from the block toolbar for the individual button block.
    - Added ALT tags for the images.
 * Updated 2022-02-15
    - Updated screenshots to 5.9
    - Updated video to 5.9
    - Added new settings for previous versions
    - Added Live example

## Was this article helpful? How could it be improved? 󠀁[Cancel reply](https://wordpress.org/documentation/article/buttons-block/?output_format=md#respond)󠁿

[Log in to submit feedback](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fdocumentation%2Farticle%2Fbuttons-block%2F&locale=en_US).
If you need support with something that wasn't covered by this article, please post
your question in the [support forums](https://wordpress.org/support/forums/).

First published

October 8, 2021

Last updated

May 29, 2026