Button components 

Pre-configured buttons 

The ComponentFactory creates the buttons that many modules need, with the icon and the translated label that the TYPO3 backend uses for them. Each method returns a button that you can change further, for example with setDataAttributes() or setClasses() . A parameter that takes a URL accepts a string or a \Psr\Http\Message\UriInterface .

1. The close button
2. The save button
3. The reload button, which TYPO3 adds to every module

createBackButton($returnUrl)

A link button with the label "Go back" that leads to $returnUrl.

createCloseButton($closeUrl)

A link button with the label "Close" that leads to $closeUrl, for example to leave a detail view.

createReloadButton($requestUri)

A link button with an icon and no label that loads $requestUri. TYPO3 adds a reload button to every module, see Automatic buttons in the module header. Create one only for a module that switches the automatic button off.

createSaveButton($formName = '')

An input button with the label "Save", the name _savedok, and the value 1. $formName is the id of the HTML form that the button submits.

createViewButton($previewDataAttributes = [])

A link button with the label "View webpage" that opens a page in the frontend. Pass the data attributes that \TYPO3\CMS\Backend\Routing\PreviewUriBuilder::buildDispatcherDataAttributes() returns. Without data attributes, the button is disabled.

createQrCodeButton($previewUrl, $showCopyUrl = true)

A generic button with the label "Show QR code". It opens a modal with a QR code of $previewUrl, which the user can download as PNG or SVG. If $showCopyUrl is true, the modal also shows the URL with a button to copy it. Without a URL, the button is disabled.

New in version 14.2 Feature: #108720 - QR code button for frontend preview

Example of a module that edits a record in its own form:

$this->moduleTemplate->addButtonToButtonBar(
  $this->componentFactory->createBackButton($returnUrl),
  ButtonBar::BUTTON_POSITION_LEFT,
  1,
);
$this->moduleTemplate->addButtonToButtonBar(
  $this->componentFactory->createSaveButton('my-record-form'),
  ButtonBar::BUTTON_POSITION_LEFT,
  2,
);

Generic button component 

The component \TYPO3\CMS\Backend\Template\Components\Buttons\GenericButton allows to render any markup in the module menu bar.

Example:

$buttonBar = $this->moduleTemplate->getDocHeaderComponent()->getButtonBar();
$genericButton = GeneralUtility::makeInstance(GenericButton::class)
    ->setTag('a')
    ->setHref('#')
    ->setLabel('My label')
    ->setTitle('My title')
    ->setIcon($this->iconFactory->getIcon('actions-heart'))
    ->setAttributes(['data-value' => '123']);
$buttonBar->addButton($genericButton, ButtonBar::BUTTON_POSITION_RIGHT, 2);

Setting HTML attributes on backend buttons 

The link, input and split buttons accept HTML attributes through setAttributes() , like the generic button does. Use these buttons rather than a generic button if you only need a few attributes:

$previewButton = $this->componentFactory->createLinkButton()
    ->setHref($previewUrl)
    ->setTitle('Open preview')
    ->setIcon($this->iconFactory->getIcon('actions-view'))
    ->setAttributes(['target' => '_blank', 'rel' => 'noopener']);
$buttonBar->addButton($previewButton, ButtonBar::BUTTON_POSITION_RIGHT, 2);

Disabling a backend button 

An action that is not available right now reads better as a disabled button than as a missing one: the button bar keeps its layout, and the user still sees that the action exists.

setDisabled() sets the state and isDisabled() reads it back. The link, input and split buttons inherit both from AbstractButton , and DropDownButton implements them as well. The generic button has no disabled state.

<?php

declare(strict_types=1);

namespace MyVendor\MyExtension\Controller;

use MyVendor\MyExtension\Domain\Repository\ItemRepository;
use Psr\Http\Message\ResponseInterface;
use Psr\Http\Message\ServerRequestInterface;
use TYPO3\CMS\Backend\Routing\UriBuilder;
use TYPO3\CMS\Backend\Template\Components\ButtonBar;
use TYPO3\CMS\Backend\Template\Components\Buttons\DropDown\DropDownItem;
use TYPO3\CMS\Backend\Template\Components\ComponentFactory;
use TYPO3\CMS\Backend\Template\ModuleTemplate;
use TYPO3\CMS\Backend\Template\ModuleTemplateFactory;
use TYPO3\CMS\Core\Imaging\IconFactory;

final readonly class MyBackendController
{
  public function __construct(
    private ModuleTemplateFactory $moduleTemplateFactory,
    private ComponentFactory $componentFactory,
    private IconFactory $iconFactory,
    private UriBuilder $uriBuilder,
    private ItemRepository $itemRepository,
  ) {}

  public function handleRequest(
    ServerRequestInterface $request,
  ): ResponseInterface {
    $view = $this->moduleTemplateFactory->create($request);
    $pageId = (int)($request->getQueryParams()['id'] ?? 0);

    $this->addExportButton($view, $pageId);

    return $view->renderResponse('MyBackend/Index');
  }

  private function addExportButton(
    ModuleTemplate $view,
    int $pageId,
  ): void {
    $exportButton = $this->componentFactory->createDropDownButton()
        ->setLabel('Export')
        ->setIcon($this->iconFactory->getIcon('actions-download'))
        // Nothing to export yet: keep the button, but switch it off
        ->setDisabled($this->itemRepository->countByPid($pageId) === 0)
        ->addItem($this->exportItem('CSV', $pageId, 'csv'))
        ->addItem($this->exportItem('XML', $pageId, 'xml'));

    $view->addButtonToButtonBar(
      $exportButton,
      ButtonBar::BUTTON_POSITION_RIGHT,
      2,
    );
  }

  private function exportItem(
    string $label,
    int $pageId,
    string $format,
  ): DropDownItem {
    $url = $this->uriBuilder->buildUriFromRoute(
      'my_extension_export',
      ['id' => $pageId, 'format' => $format],
    );

    return $this->componentFactory->createDropDownItem()
        ->setLabel($label)
        ->setHref((string)$url);
  }
}

Dropdown button components 

The backend module menu button bar can display dropdowns. This enables interface interactions, such as switching the current view from list to tiles, or group actions like clipboard and thumbnail visibility. This helps unclutter the views and allow the user to see more information at a glance.

Each dropdown consists of various elements ranging from headings to item links that can display the current status. The button automatically changes the icon representation to the icon of the the first active radio icon in the dropdown list.

$dropDownButton = $this->componentFactory->createDropDownButton()
    ->setLabel('Dropdown')
    ->setTitle('Save')
    ->setIcon($this->iconFactory->getIcon('actions-heart'))
    ->addItem(
        $this->componentFactory->createDropDownItem()
            ->setLabel('Item')
            ->setHref('#')
    );

use TYPO3\CMS\Backend\Template\Components\Buttons\DropDown\DropDownDivider;

$item = GeneralUtility::makeInstance(DropDownDivider::class);
$dropDownButton->addItem($item);

use TYPO3\CMS\Backend\Template\Components\Buttons\DropDown\DropDownHeader;

$item = GeneralUtility::makeInstance(DropDownHeader::class)
    ->setLabel('My label');
$dropDownButton->addItem($item);

use TYPO3\CMS\Backend\Template\Components\Buttons\DropDown\DropDownItem;

$item = GeneralUtility::makeInstance(DropDownItem::class)
    ->setTag('a')
    ->setHref('#')
    ->setLabel('My label')
    ->setTitle('My title')
    ->setIcon($this->iconFactory->getIcon('actions-heart'))
    ->setAttributes(['data-value' => '123']);
$dropDownButton->addItem($item);

$item = GeneralUtility::makeInstance(DropDownRadio::class)
    ->setHref('#')
    ->setActive(true)
    ->setLabel('My label')
    ->setTitle('My title')
    ->setIcon($this->iconFactory->getIcon('actions-viewmode-list'))
    ->setAttributes(['data-type' => 'list']);
$dropDownButton->addItem($item);

$item = GeneralUtility::makeInstance(DropDownRadio::class)
    ->setHref('#')
    ->setActive(false)
    ->setLabel('Tiles')
    ->setTitle('Tiles')
    ->setIcon($this->iconFactory->getIcon('actions-viewmode-tiles'))
    ->setAttributes(['data-type' => 'tiles']);
$dropDownButton->addItem($item);

$item = GeneralUtility::makeInstance(DropDownToggle::class)
    ->setHref('#')
    ->setActive(true)
    ->setLabel('My label')
    ->setTitle('My title')
    ->setIcon($this->iconFactory->getIcon('actions-heart'))
    ->setAttributes(['data-value' => '123']);
$dropDownButton->addItem($item);