Button

Prompt visitors to take action with a button-style link.

The WordPress button block is the individual button inside the buttons block (a so called child block).
Add a text and link to your button and select its colors, font family and font size. You can also adjust the alignment, padding and width. At this time there is no way to change the border width, style, or border color, only the radius.

Tip: Did you know that you can place inline images or copy paste emojis in the button?

This block is available in the latest version of WordPress and does not require the Gutenberg plugin.

Last updated

Category:

For developers

Parent

Optional. Type: Array.

Blocks are able to be inserted into blocks that use InnerBlocks as nested content. Setting parent lets a block require that it is only available when nested within the specified blocks.

Documentation

[
  "core/buttons"
]

Block Attributes

Optional. Type: Object.

Attributes provide the structured data needs of a block. They can exist in different forms when they are serialized, but they are declared together under a common interface.

Documentation

{
  "textAlign": {
    "type": "string"
  },
  "url": {
    "type": "string",
    "source": "attribute",
    "selector": "a",
    "attribute": "href"
  },
  "title": {
    "type": "string",
    "source": "attribute",
    "selector": "a",
    "attribute": "title"
  },
  "text": {
    "type": "string",
    "source": "html",
    "selector": "a"
  },
  "linkTarget": {
    "type": "string",
    "source": "attribute",
    "selector": "a",
    "attribute": "target"
  },
  "rel": {
    "type": "string",
    "source": "attribute",
    "selector": "a",
    "attribute": "rel"
  },
  "placeholder": {
    "type": "string"
  },
  "width": {
    "type": "number"
  },
  "anchor": {
    "type": "string",
    "source": "attribute",
    "attribute": "id",
    "selector": "*"
  }
}

Block Supports

Optional. Type: Object.

A set of options that enables or disables block controls in the editor, for example gradient colors or padding.

Documentation

{
  "anchor": true,
  "align": false,
  "alignWide": false,
  "color": {
    "__experimentalSkipSerialization": true,
    "gradients": true,
    "__experimentalDefaultControls": {
      "background": true,
      "text": true
    }
  },
  "typography": {
    "fontSize": true,
    "lineHeight": true,
    "__experimentalFontFamily": true,
    "__experimentalFontWeight": true,
    "__experimentalFontStyle": true,
    "__experimentalTextTransform": true,
    "__experimentalTextDecoration": true,
    "__experimentalLetterSpacing": true,
    "__experimentalDefaultControls": {
      "fontSize": true
    }
  },
  "reusable": false,
  "spacing": {
    "__experimentalSkipSerialization": true,
    "padding": [
      "horizontal",
      "vertical"
    ],
    "__experimentalDefaultControls": {
      "padding": true
    }
  },
  "__experimentalBorder": {
    "radius": true,
    "__experimentalSkipSerialization": true,
    "__experimentalDefaultControls": {
      "radius": true
    }
  },
  "__experimentalSelector": ".wp-block-button .wp-block-button__link"
}