Polymer core-button link

Question

This seems like a really stupid question, but how do I make a button link to a webpage?

I've tried the following

<paper-button raisedButton class="colored" iconSrc="http://g.twimg.com/Twitter_logo_white.png"><a href="http://twitter.com/username" target="_blank">follow</a></paper-button>


<paper-button raisedButton class="colored" iconSrc="http://g.twimg.com/Twitter_logo_white.png" link="http://twitter.com/username">follow</paper-button>

Answer 1

This might be over-the-top, but quite Polymer-ey. You could use:

<paper-button 
    raisedButton 
    class="colored" 
    iconSrc="http://g.twimg.com/Twitter_logo_white.png" 
    label="Follow"
    link="http://twitter.com/username"
    on-tap="{{goLink}}"></paper-button>

Then in your script have:

Polymer('element-name', {
    goLink: function(e) {
        window.location.href = e.target.getAttribute('link');
    }
});

Then all your buttons can just use the same link="WHATEVER" on-tap="{{goLink}}" attributes.

Answer 2

In Polymer version I am using (1.2), you can simply do this:

<a href="http://google.com"><paper-button raised>Account</paper-button></a>

I think this simplicity has been available as of Polymer 1.0.

Answer 3

What about onclick?

<paper-button raisedButton label="test" onclick="javascript:alert('f')"></paper-button>

Answer 4

I solved it by doing the following:

<paper-button raisedButton class="colored" iconSrc="iconurl" onclick="window.open('url','_blank');">label text</paper-button>