How to display language switcher block as buttons, instead of simple links? the language switch block looks like this:



I would like to display it as bootstrap buttons or whatever else is possible. At least not in plain links.

&lt;button type="button" class="btn btn-primary"&gt;Primary&lt;/button&gt;


Now in my D8 core, I found the PHP file for the language switcher, but I don't see where i can put my HTML code.

/**
 * Provides a 'Language switcher' block.
 *
 * @Block(
 *   id = "language_block",
 *   admin_label = @Translation("Language switcher"),
 *   category = @Translation("System"),
 *   deriver = "Drupal\language\Plugin\Derivative\LanguageBlock"
 * )
 */
class LanguageBlock extends BlockBase implements ContainerFactoryPluginInterface {

  /**
   * The language manager.
   *
   * @var \Drupal\Core\Language\LanguageManagerInterface
   */
  protected $languageManager;

  /**
   * The path matcher.
   *
   * @var \Drupal\Core\Path\PathMatcherInterface
   */
  protected $pathMatcher;

  /**
   * Constructs an LanguageBlock object.
   *
   * @param array $configuration
   *   A configuration array containing information about the plugin instance.
   * @param string $plugin_id
   *   The plugin_id for the plugin instance.
   * @param mixed $plugin_definition
   *   The plugin implementation definition.
   * @param \Drupal\Core\Language\LanguageManagerInterface $language_manager
   *   The language manager.
   * @param \Drupal\Core\Path\PathMatcherInterface $path_matcher
   *   The path matcher.
   */
  public function __construct(array $configuration, $plugin_id, $plugin_definition, LanguageManagerInterface $language_manager, PathMatcherInterface $path_matcher) {
    parent::__construct($configuration, $plugin_id, $plugin_definition);
    $this-&gt;languageManager = $language_manager;
    $this-&gt;pathMatcher = $path_matcher;
  }


  /**
   * {@inheritdoc}
   */
  public static function create(ContainerInterface $container, array $configuration, $plugin_id, $plugin_definition) {
    return new static(
      $configuration,
      $plugin_id,
      $plugin_definition,
      $container-&gt;get('language_manager'),
      $container-&gt;get('path.matcher')
    );
  }


  /**
   * {@inheritdoc}
   */
  protected function blockAccess(AccountInterface $account) {
    $access = $this-&gt;languageManager-&gt;isMultilingual() ? AccessResult::allowed() : AccessResult::forbidden();
    return $access-&gt;addCacheTags(['config:configurable_language_list']);
  }

  /**
   * {@inheritdoc}
   */
  public function build() {
    $build = array();
    $route_name = $this-&gt;pathMatcher-&gt;isFrontPage() ? '&lt;front&gt;' : '&lt;current&gt;';
    $type = $this-&gt;getDerivativeId();
    $links = $this-&gt;languageManager-&gt;getLanguageSwitchLinks($type, Url::fromRoute($route_name));

    if (isset($links-&gt;links)) {
      $build = array(
        '#theme' =&gt; 'links__language_block',
        '#links' =&gt; $links-&gt;links,
        '#attributes' =&gt; array(
          'class' =&gt; array(
            "language-switcher-{$links-&gt;method_id}",
          ),
        ),
        '#set_active_class' =&gt; TRUE,
      );
    }
    return $build;
  }

  /**
   * {@inheritdoc}
   *
   * @todo Make cacheable in https://www.drupal.org/node/2232375.
   */
  public function getCacheMaxAge() {
    return 0;
  }

}
First choice
If you wants some design related change you can easily achieve using CSS.

Second choice
Enable twig.config: debug: true

See some template file where you can made changes.


  FILE NAME SUGGESTIONS:
  links--language-block.html.twig
  links--language-block.html.twig
  links.html.twig


Changing markup of the language switcher

Trird choice
Alter _language_switch_links_alter.
How do I alter a language item link?