{% set description %}
  When appropriate, an <code>&lt;a&gt;</code> element can use the button style. For example, the button helps to navigate to another page.
{% endset %}

{% set notes %}
  If a button serves navigational purpose, the proper URL must be set with the <code>href</code> attribute.
{% endset %}

{% set demo %}
  {% include '@bolt-elements-button/button.twig' with {
    content: 'This looks like a button but semantically is an anchor',
    attributes: {
      href: 'https://google.com',
    }
  } only %}
{% endset %}

{% set twig_markup %}
{% verbatim %}
{% include '@bolt-elements-button/button.twig' with {
  content: 'This looks like a button but semantically is an anchor',
  attributes: {
    href: 'https://google.com',
  }
} only %}
{% endverbatim %}
{% endset %}

{% set html_markup %}
{% verbatim %}
<a href="https://google.com" class="e-bolt-button">This looks like a button but semantically is an anchor</a>
{% endverbatim %}
{% endset %}

{% include '@utils/pattern-doc-page.twig' with {
  title: 'Button as an &lt;a&gt; element',
  description: description,
  notes: notes,
  demo: demo,
  twig_markup: twig_markup,
  html_markup: html_markup,
} only %}
