Button and href tag

Hey guys, can anyone point me to the right direction, how can i add href tel: xxxx to the button? adding href tag gives an error. can i acheive the same with (click)?

        <button href="tel:1234567" secondary clear item-right>
            <ion-icon name="call"></ion-icon>
<button data-href="tel:1234567" secondary clear item-right>
   <ion-icon name="call"></ion-icon>


<button (click)="call('tel:1234567')" secondary clear item-right>
   <ion-icon name="call"></ion-icon>

hi, data-href does not work, i get the following error.

Can't bind to 'href' since it isn't a known native property ("
    <ion-item *ngIf="!showConfirmAction(item)">
        <button [ERROR ->]data-href="tel:{{ item.phone }}" secondary clear item-right>

hm hm… Try this

[attr.href]="tel:{{ item.phone }}"

now i get this browser_adapter.js:84 EXCEPTION: Error: Uncaught (in promise): Quotes are not supported for evaluation!

but when i change to [attr.href]="item.requestor.username" no error, but how to add “tel:” :confused:

Could you solve that?

I’m getting the following error:

EXCEPTION: Error: Uncaught (in promise): Quotes are not supported for evaluation!

My code:

<button clear [attr.href]="tel:55481548">
  <ion-icon name="call"></ion-icon>

couldnt do it within the template, so had to create a typescript function.


There is no way to create buttons that trigger the call or mail easily?
Could you explain in more detail the solution you used?


trying something like

    call(item:User):string {
        return `tel:${item.phone}`;
<span (click)="call(user)">

That did not work for me.

<button clear (click)="call()">
<ion-icon name="call"></ion-icon>

call(): string {
    return 'tel:1234567';

can you try [attr.href] instead of (click)?

You could try to set the button and its attributes as attributes of <a>:

<a button href="tel:1234567" clear item-right><ion-icon name="call"></ion-icon>Call</a>

This works for me.


Only I don’t understand, why you can’t use <a href=""> tag?

1 Like

Perfect, It works.

I did not know you could make a button in this way, did not find it in the documentation, thank you very much.

<a button href="tel:12345789" clear>
  <ion-icon name="call"></ion-icon>

I didn’t find any documentation about it either. I just saw a similar approach in the docs with

<a ion-item ...></a>

for creating an anchor item. So I tried it out with button instead.

1 Like

Sorry, “tel” link is working using ionic serve but not in ionic view app
preview, thats right? Will it work after build the app? I couldnt try it

I dont’ use the ionic view app, but on my android phone (5.1) it works perfect and opens the phone app together with the correct phone number.

<button (click)='callWithNumber('123456789')'> Call </button>

Method :
callWithNumber(mobileNumber){ window.open("tel:" + mobileNumber); }

This worked for me on Android phone. :slight_smile:


This is what I use:

<a href="mailto:abc@abc.com?Subject=Help%20ABC" target="_top" ion-button full clear>
   <ion-icon name="mail"></ion-icon>

Hope it helps.


you can try this , it work for me.

  <a href="yourlink" target="_top" ion-button full clear>
      <button ion-button>Enter Button</button>