Button types
I’ve been banging the drum for a button type="share"
for a while now.
I’ve also written about other potential button types. The pattern I noticed was that, if a JavaScript API first requires a user interaction—like the Web Share API—then that’s a good hint that a declarative option would be useful:
The Fullscreen API has the same restriction. You can’t make the browser go fullscreen unless you’re responding to user gesture, like a click. So why not have button type=”fullscreen” in HTML to encapsulate that? And again, the fallback in non-supporting browsers is predictable—it behaves like a regular button—so this is trivial to polyfill.
There’s another “smell” that points to some potential button types: what functionality do browsers provide in their interfaces?
Some browsers provide a print button. So how about button type="print"
? The functionality is currently doable with button onclick="window.print()"
so this would be a nicer, more declarative way of doing something that’s already possible.
It’s the same with back buttons, forward buttons, and refresh buttons. The functionality is available through a browser interface, and it’s also scriptable, so why not have a declarative equivalent?
How about bookmarking?
And remember, the browser interface isn’t always visible: progressive web apps that launch with minimal browser UI need to provide this functionality.
Šime Vidas was wondering about button type="copy”
for copying to clipboard. Again, it’s something that’s currently scriptable and requires a user gesture. It’s a little more complex than the other actions because there needs to be some way of providing the text to be copied, but it’s definitely a valid use case.
button type="share"
button type="fullscreen"
button type="print"
button type="bookmark"
button type="back"
button type="forward"
button type="refresh"
button type="copy"
Any more?