This page demonstrates how to use the Progressive Share Button web component. The component is an easy way to add a share button to a web page using the OS native share options by using the Web Share API. The “progressive” portion of the name refers to how the component deals with browser support for the API. The button displays the OS specific share button if the browser supports the Web Share API. It will simply not display and throw no errors when support is lacking.
Read about support on the Can I Use page for the Web Share API.
The most basic usage is using no attributes. This makes the component share the URL of the current page.
<progressive-share-button />
You can specify the URL and the title as demonstrated in the next example.
<progressive-share-button url="https://github.com/johnfmorton/progressive-share-button" title="Visit the Progressive Share Button homepage" debug=0 />
The following is the same as the basic example above, but with debug mode enabled. Debug mode will display the button even if the browser does not support the Web Share API. (If you are on Chrome on a Mac, this will be the only instance of the share button you will see on this page.) Because the following button has debug on, `debug=1`, clicking the share icon will not activate the share dialog box but instead will console.log the data that will be shared.
<progressive-share-button url="https://github.com/johnfmorton/progressive-share-button" title="Visit the Progressive Share Button homepage" debug=1 />
Debug and show the share icon as determined by the component and its best guess at your operating system:
<progressive-share-button url="https://github.com/johnfmorton/progressive-share-button" title="Visit the Progressive Share Button homepage" debug=1 os="ios" id="debug-example-ios" /></p>
Debug and show the iOS/Mac share icon:
<progressive-share-button url="https://github.com/johnfmorton/progressive-share-button" title="Visit the Progressive Share Button homepage" debug=1 os="android" id="debug-example-android" />
Debug and show the Android share icon:
<progressive-share-button url="https://github.com/johnfmorton/progressive-share-button" title="Visit the Progressive Share Button homepage" debug=1 os="windows" id="debug-example-windows" />
Debug and show the Windows / default share icon:
The following shows the bounding box in neon green for each icon to help you see the icons and their size relation to each other.
The following example uses the “smart-share” feature which will concatenate the title, text and URL into a single string and then share that string. This helps deal with some inconsistent implementations in the Web Share API.
<progressive-share-button title="Progressive Share Button" text="Check out this cool web component that creates a share button that will only be displayed if the browser supports the Web Share API." url="https://github.com/johnfmorton/progressive-share-button" smart-share=1 icon-size="20" debug=0 class="example-1" />
<style>
progressive-share-button.example-1::part(shareButton) {
background-color: blueviolet;
border-radius: 5px;
padding: 0.45rem 0.75rem 0.75rem;
}
progressive-share-button.example-1:hover::part(shareButton) {
background-color: blue;
}
progressive-share-button.example-1::part(shareIcon) {
color: white;
}
progressive-share-button.example-1:hover::part(shareIcon) {
color: orange;
}
</style>
The following two examples demonstrate overriding the icon built into the component by placing content, the text "Share this link," in the slot inside the component.
The first shows how to use the ::part attribute to style the `shareButton` in the web component to make the button look like a regular link.
<progressive-share-button url="https://github.com/johnfmorton/progressive-share-button" class="text-share-example-1" debug=0>Share this link</progressive-share-button>
<style>
progressive-share-button.text-share-example-1::part(shareButton) {
font-size: 1rem;
text-decoration: underline;
color: blue;
}
</style>
The second example shows how to use the ::part attribute to style the `shareButton` in the web component to make the button look like red button.
<progressive-share-button url="https://github.com/johnfmorton/progressive-share-button" class="text-share-example-2" debug=0>Share this link</progressive-share-button>
<style>
progressive-share-button.text-share-example-2::part(shareButton) {
background: red;
color: white;
font-size: 0.75rem;
border-radius: 1rem;
border: 1px solid black;
padding: 0.25rem 0.75rem;
}
</style>