Docs: how to use paper-button as a link

[robdodson]

Element doc should include an example of wrapping the button in an anchor so it can be used as a link.

[SayChunKim]

+1

[gulyasfeccferenc]

+1

[ebidel]

Here's one way:

<paper-button onclick="addNewFeature(this)"></paper-button>

function addNewFeature(el) {
  // Wait for ripple to finish.
  el.addEventListener('transitionend', function(e) {
    location.href = '/admin/features/new';
  });
}```

You could also use a declarative `<a>` and prevent the click, wait for the ripple to finish, and then do the redirect.

[robdodson]

Or use the noink attr if you aren't a fan of the ripple

[kaycebasques]

:+1: AKA +1

[abdonrd]

With the @ebidel way, we need to write a javascript function...

<paper-button onclick="addNewFeature(this)"></paper-button>

function addNewFeature(el) {
  // Wait for ripple to finish.
  el.addEventListener('transitionend', function(e) {
    location.href = '/admin/features/new';
  });
}

---

And if we use a declarative <a>, we lost the ripple and maybe it is an ugly code:

<a href="https://www.polymer-project.org">
    <paper-button>Polymer website</paper-button>
</a>

---

We can have something like this?

<paper-button href="https://www.polymer-project.org">Polymer website</paper-button>

[ebidel]

I don't think href makes sense on paper-button, but it would be nice if paper-button knew it had a anchor children and had a feature that de-janked the ripple for you.

[abdonrd]

@ebidel like this?

<paper-button>
    <a href="https://www.polymer-project.org">Polymer website</a>
</paper-button>

[ebidel]

Yes. It would JustWork:registered:

[abdonrd]

@ebidel and we have the same problem with the paper-icon-button. It would be something like this? An empty <a> is strange.

<paper-icon-button icon="polymer">
    <a href="https://www.polymer-project.org"></a>
</paper-icon-button>

[abdonrd]

@robdodson @ebidel do you have any news about this?

We have the same "problem" with the paper-icon-button.

[MeTaNoV]

/sub

[cdata]

After thinking about this for a bit, I believe the ideal we should strive for is this form:

<a href="https://www.polymer-project.org">
  <paper-button>Polymer website</paper-button>
</a>

However, there may be problems with this form (e.g., a parent expects a specific kind of child, so wrapping is not an option). Are there any known conditions that you guys have run into where this would not work?

And if we use a declarative , we lost the ripple

I tested this and the ripple seems to work fine in this condition.

[cdata]

@robdodson @ebidel @abdonrd ^

[robdodson]

That looks fine to me. I would maybe put noink on the button to get rid of the ripple so it doesn't jank the page. On Dec 16, 2015 3:15 PM, "Christopher Joel" notifications@github.com wrote:

@robdodson https://github.com/robdodson @ebidel https://github.com/ebidel @abdonrd https://github.com/abdonrd ^

— Reply to this email directly or view it on GitHub https://github.com/PolymerElements/paper-button/issues/35#issuecomment-165279432 .

[abdonrd]

Thanks @cdata!

I can you show an use of case when we have problems: http://jsbin.com/kuyisinara We have a small problem, easily solved with CSS. But try to use the tab key and see the focus behavior. :(

The solution would be to add the tabindex="-1" to the as?

[keanulee]

Added an example of this in #91. I decided to leave out the noink attribute since it's nice to see the ripple effect when the user mousedowns (navigation doesn't occur until mouseup).

[abdonrd]

@keanulee check the behavior with focus. :/

First tab:

Second tab:

[keanulee]

Ah yes, that is an issue. Easy way to fix this is to add tabindex="-1" to the <a> tag. <paper-button> would still be able to receive focus, and you can still navigate. I'll add this to #91. Thanks @abdonrd

[abdonrd]

Nice @keanulee! Your welcome!

[keanulee]

Example has been added in #91

[abdonrd]

@keanulee It would be great if you add another example waiting to finish the ripple effect before opening the link. :blush: