# Confirmation with button

Please note that all links should include the protocol (http or https), or else outlook will remove all styling related to that link.

## With all information

<doc-tabs>
<doc-tab name="Preview" :selected="true">
  <iframe style="border: 0; width: 100%; height: 600px; border: 1px solid #ccc;" :src="$withBase('/guide/compositions/email-templates/button/button.html')"/>
  <div class="app">
    <div class="d-flex justify-content-end">
      <v-button :href="$withBase('/guide/compositions/email-templates/button/button.html')" class="pr-0" target="_blank" link>Open in new tab</v-button>
    </div>
  </div>
</doc-tab>
<doc-tab name="Code">

<<< @/src/docs/guide/compositions/email-templates/button/button.html

</doc-tab>
</doc-tabs>

## Without department name

<doc-tabs>
<doc-tab name="Preview" :selected="true">
  <iframe style="border: 0; width: 100%; height: 600px; border: 1px solid #ccc;" :src="$withBase('/guide/compositions/email-templates/button/button-no-branch.html')"/>
  <div class="app">
    <div class="d-flex justify-content-end">
      <v-button :href="$withBase('/guide/compositions/email-templates/button/button-no-branch.html')" class="pr-0" target="_blank" link>Open in new tab</v-button>
    </div>
  </div>
</doc-tab>
<doc-tab name="Code">

<<< @/src/docs/guide/compositions/email-templates/button/button-no-branch.html

</doc-tab>
</doc-tabs>

## Without helper text

<doc-tabs>
<doc-tab name="Preview" :selected="true">
  <iframe style="border: 0; width: 100%; height: 600px; border: 1px solid #ccc;" :src="$withBase('/guide/compositions/email-templates/button/button-no-helper.html')"/>
  <div class="app">
    <div class="d-flex justify-content-end">
      <v-button :href="$withBase('/guide/compositions/email-templates/button/button-no-helper.html')" class="pr-0" target="_blank" link>Open in new tab</v-button>
    </div>
  </div>
</doc-tab>
<doc-tab name="Code">

<<< @/src/docs/guide/compositions/email-templates/button/button-no-helper.html

</doc-tab>
</doc-tabs>

## Without link in footer

<doc-tabs>
<doc-tab name="Preview" :selected="true">
  <iframe style="border: 0; width: 100%; height: 600px; border: 1px solid #ccc;" :src="$withBase('/guide/compositions/email-templates/button/button-no-address-links.html')"/>
  <div class="app">
    <div class="d-flex justify-content-end">
      <v-button :href="$withBase('/guide/compositions/email-templates/button/button-no-address-links.html')" class="pr-0" target="_blank" link>Open in new tab</v-button>
    </div>
  </div>
</doc-tab>
<doc-tab name="Code">

<<< @/src/docs/guide/compositions/email-templates/button/button-no-address-links.html

</doc-tab>
</doc-tabs>