All components (204)

Share button

Actions · ShareButton

What it is and when to use it

Sharing a page: a product, a wish list, an order. On press, if the browser has its own share menu (navigator.share: mobiles and Safari), that one is used, as it knows the installed applications. If not, a panel opens with "Copy link" and the usual networks.

When to use it

On the page of a product or of content that people send to others.
title and url are what is shared; label is the button text ("Share" by default).
networks to keep only those that make sense (whatsapp, telegram, x, email): a neighborhood shop may only want WhatsApp and email.
text for the message that goes with the link; without it, the title goes.

When not to

Copying a single piece of data (a code, an IBAN): Copyable.
A fixed link to a specific network: ButtonLink.

Keyboard: Tab reaches the button; Enter or Space press it. The panel is a <dialog> next to the button that makes the rest of the page inert while it is open: focus enters on opening, Tab goes through the options and Escape closes it and returns focus to the button.

Accessibility: the panel is announced as "Share “title”". Each network is a link that warns it opens in another tab ("WhatsApp (opens in a new tab)"). "Copy link" closes the panel and says so in a status region ("Link copied"), which is emptied after a while so that copying again is heard again. If it cannot be copied, the panel stays open and it is said from inside it: with the panel open, the rest of the page is hidden from the reader. Closing the system menu is not treated as a failure: it is changing your mind. A real failure (of the system menu, which gives way to the panel, or of the clipboard) goes to onError, or to the console if none is passed.

Fine-tuning: no variables of its own. The button is a Button (outline by default, with variant, tone and size) and accepts the --amset-button-*; the panel is adjusted with the classes amset-share and amset-share__option. className goes to the panel, not to the button.

If your browser has its own share menu, on this page you will see that one and not the panel.

What it looks like

<ShareButton
  title="Aurelia silver ring"
  url="https://tienda.ejemplo.es/anillos/aurelia-plata"
  text="Check out this silver ring from Aurelia Jewelry"
/>
<ShareButton title="My wish list" url={enlace} label="Share the list" networks={['whatsapp', 'telegram']} />

Props

Import it with import { ShareButton } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`title`required	`string`	—
`url`required	`string`	—
`className`	`string`	Merged with the library classes; it does not replace them.
`label`	`string`	—
`networks`	`readonly ShareNetwork[]`	—
`onError`	`(error: unknown) => void`	What is done with a real failure (the system menu that does not open, the clipboard without permission), besides opening the panel or saying so: sending it to the application's log. Without this it goes to the console. Cancelling the system menu is not a failure and does not reach here.
`size`	`"sm" \| "md" \| "lg"`	—
`text`	`string`	—
`tone`	`"neutral" \| "accent" \| "secondary" \| "tertiary" \| "info" \| "success" \| "warning" \| "error"`	—
`variant`	`"solid" \| "soft" \| "outline" \| "ghost"`	—

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: