Share

<quiet-share>

stable

since 1.0

Share buttons let users share links, files and text via their operating system's share interface.

In supportive browsers, the system's share interface will be shown. In unsupportive browsers or unsecure contexts, the data is copied to the user's clipboard instead.

<quiet-share 
  label="Quiet UI" 
  text="An awesome library for building on the Web." 
  url="https://quietui.org/"
></quiet-share>

This component uses the Web Share API's share() method, which requires a secure context. In other words, for maximum browser support, make sure the URL starts with https://.

Examples Jump to heading

Using custom buttons Jump to heading

Use a custom button by simply slotting it in. Both Quiet buttons and native buttons are supported.

<quiet-share 
  label="Quiet UI" 
  text="An awesome library for building on the Web." 
  url="https://quietui.org/"
>
  <quiet-button>
    <quiet-icon slot="start" name="share-2"></quiet-icon>
    Share
  </quiet-button>
</quiet-share>

<quiet-share
  label="Quiet UI" 
  text="An awesome library for building on the Web." 
  url="https://quietui.org/"
  style="margin-inline-end: 0.5rem;"
>
  <quiet-button>
    <quiet-icon slot="start" name="share"></quiet-icon>
    Share
  </quiet-button>
</quiet-share>

Set the url attribute to the URL you'd like to share. Although optional, it's usually a good idea to also provide a label.

<quiet-share 
  label="Cat on Wikipedia" 
  url="https://en.wikipedia.org/wiki/Cat"
></quiet-share>

Set the text attribute to the plain text you'd like to share. Although optional, it's usually a good idea to also provide a label.

<quiet-share 
  label="Check this out"
  text="I'm sharing this text with you from my website"
></quiet-share>

Set the files property to an array of File objects you'd like to share. Although optional, it's usually a good idea to also provide a label.

Share selected image

<div id="share__file">
  <quiet-file-input label="Select an image to share" accept="image/*"></quiet-file-input>
  <br>
  <quiet-share label="Share image">
    <quiet-button>
      <quiet-icon slot="start" name="share-2"></quiet-icon>
      Share selected image
    </quiet-button>    
  </quiet-share>
</div>

<script>
  const container = document.getElementById('share__file');
  const fileInput = container.querySelector('quiet-file-input');    
  const share = container.querySelector('quiet-share');

  // When a file is selected, try to share it
  fileInput.addEventListener('input', async (event) => {
    const file = event.target.files[0];
    
    // Pass the selected file to the share component
    if (file) {
      share.files = [file];
    } else {
      share.files = [];
    }
  });
</script>

Disabling Jump to heading

Add the disabled attribute to disable the button and prevent sharing.

<quiet-share 
  label="Quiet UI" 
  text="An awesome library for building on the Web." 
  url="https://quietui.org/" 
  disabled
></quiet-share>

API Jump to heading

Importing Jump to heading

The autoloader is the recommended way to import components but, if you prefer to do it manually, the following code snippets will be helpful.

CDN

npm

To manually import <quiet-share> from the CDN, use the following code.

import 'https://cdn.jsdelivr.net/npm/@quietui/quiet@1.0.0/dist/components/share/share.js';

To manually import <quiet-share> from npm, use the following code.

import '@quietui/quiet/dist/components/share/share.js';

Slots Jump to heading

Share supports the following slots. Learn more about using slots

Name	Description
(default)	A custom button to use instead of the default.

Share has the following properties that can be set with corresponding attributes. In many cases, the attribute's name is the same as the property's name. If an attribute is different, it will be displayed after the property. Learn more about attributes and properties

Property / Attribute	Description	Type	Default
`label`	A human-readable label to be shared. This is sometimes ignored by the operating system, but you should usually provide it as a fallback value.	`string`
`text`	A string of text to be shared.	`string`
`url`	A URL to be shares.	`string`
`files`	An array of `File` objects to be shared. Property only.	`File[]`
`disabled`	Disables the button.	`boolean`	`false`
`feedbackPlacement` `feedback-placement`	The placement of the feedback animation when falling back to copying.	`'top' 'right' 'bottom' 'left' 'hidden'`	`'top'`

CSS parts Jump to heading

Share exposes internal elements that can be styled with CSS using the selectors shown below. Learn more about CSS parts

Name	Description	CSS selector
`share-button`	The default share button, a `<quiet-button>` element.	`::part(share-button)`
`share-button__button`	The default share button's exported `button` part.	`::part(share-button__button)`
`share-icon`	The default share icon, a `<quiet-icon>` element.	`::part(share-icon)`
`share-icon__svg`	The share icon's `svg` part.	`::part(share-icon__svg)`
`feedback`	The feedback that shows when copying (e.g. when the Web Share API is unsupported).	`::part(feedback)`

Examples Jump to heading #

Using custom buttons Jump to heading #

Sharing a link Jump to heading #

Sharing plain text Jump to heading #

Sharing a file Jump to heading #

Disabling Jump to heading #

API Jump to heading #

Importing Jump to heading #

Slots Jump to heading #

Properties Jump to heading #

CSS parts Jump to heading #

Examples Jump to heading

Using custom buttons Jump to heading

Sharing a link Jump to heading

Sharing plain text Jump to heading

Sharing a file Jump to heading

Disabling Jump to heading

API Jump to heading

Importing Jump to heading

Slots Jump to heading

Properties Jump to heading

CSS parts Jump to heading