The Button display format renders field values as clickable buttons inside the editor and on the frontend. This format is primarily designed for fields that contain URLs, links, downloadable files, or other navigational values.
Instead of displaying the raw value as plain text, the field is transformed into an interactive button element that can direct visitors to another page, file, email address, or external resource.
The Button display format integrates with native WordPress button styling controls, allowing buttons to match the design of the rest of the site without custom code.
Supported Field Types
The Button display format supports the following field types:
- URL
- File
- Link
- Page Link.
Customization
The Button display format includes several customization options that control how the field value is rendered.
| Customization | Description | Note |
|---|---|---|
| Align Button | Controls the button’s horizontal placement within its container. Options: left, center, right. | |
| Text Align | Controls the text alignment inside the button. | |
| Button Text | Determines where the button label comes from. Options: “Use the URL” (renders the resolved URL — for Email, the email address; for Link, the link URL; for File / Image, the attachment URL; for Page Link, the resolved permalink), “Load from another field” (pulls label text from a separate text-returning field), “Custom text” (manually entered, supports inline formatting via RichText). | |
| Text Field Name | Picks which other ACF field supplies the button label | Available only when Button Text is set to “Load from another field”. The dropdown is filtered to fields that return text. |
| Open in new tab | Adds target="_blank" (and rel="noreferrer noopener") to the rendered link. | Not available for Email fields (mailto: links). |
| Mark as nofollow | Adds rel="nofollow" to the rendered link. | Not available for Email fields. |
| Set as download link | Adds the download attribute so the linked file is downloaded instead of opened. | Available for File and Image fields only. |
| Button Width | Sets the button width as a percentage of its container. Options: Auto, 25%, 50%, 75%, 100%. Lives in the Dimensions panel. |