Buttons for Use
Nav Coin is a coin for people. Nav buttons seek to make it easier for people to send Nav as a way of thanks! The default button provides a simple copy to clipboard for your Nav address. Try it!
Nav buttons also support QR codes for even easier sharing. QR code enabled buttons take up a little more space, but provide copy functionality as well as the convenience of a QR code.
Nav buttons can accommodate lots of different text, and can be displayed at various sizes. Pick a button size that is the right fit.
If the classic Nav purple doesn't tickle your fancy, these alt buttons just might do the trick.
Everyone goes nuts for components. The Nav buttons package comes FULLY LOADED with React components.
import React from 'react';
import { NavButton } from 'nav-button/dist/nav-button-react';
const MyComponent = () => (
<NavButton
address="NhN5m1uE1QwySphDJVN4nc6WhiAB6TFjxt"
text="Tip with Nav"
actionText="Copy Address"
onCopy={copyHandler}
/>
);
import React from 'react';
import { NavQrButton } from 'nav-button/dist/nav-button-react';
const MyComponent = () => (
<NavQrButton
address="NhN5m1uE1QwySphDJVN4nc6WhiAB6TFjxt"
text="Pay with Nav"
actionText="Show QR Code"
onCopy={copyHandler}
closeText="Thanks! Got it"
alt={true}
/>
);
Sometimes you just want to paste some code and move on with your life. Nav buttons have you covered.
<script type="text/javascript">
(function(d, id) {
if (!d.getElementById(id)) {
var js;
js = d.createElement("script");
js.id = id;
js.src = "//cdn.rawgit.com/brianium/nav-button/9073d20e5eb39fe97c48e0e0a076b69ed42e2f2c/nav-embed.js";
d.head.appendChild(js);
}
}(document, 'nav-embed-js'));
</script>
<div class="nav-btn-placeholder" data-class-name="mx-auto mb-3" data-text="Tip with Nav" data-action-text="Copy Address" data-address="NhN5m1uE1QwySphDJVN4nc6WhiAB6TFjxt"></div>
<script type="text/javascript">
(function(d, id) {
if (!d.getElementById(id)) {
var js;
js = d.createElement("script");
js.id = id;
js.src = "//cdn.rawgit.com/brianium/nav-button/9073d20e5eb39fe97c48e0e0a076b69ed42e2f2c/nav-embed.js";
d.head.appendChild(js);
}
}(document, 'nav-embed-js'));
</script>
<div class="nav-btn-placeholder" data-class-name="mx-auto mb-3" data-text="Pay with Nav" data-action-text="Show QR Code" data-type="qr" data-address="NhN5m1uE1QwySphDJVN4nc6WhiAB6TFjxt"></div>
If you find these useful, please consider sending me some Nav. All of these demo buttons are pointing to my address.
I plan to develop on these further - including plugins for easily dropping them into popular content management platforms, starting with a WordPress plugin.