ShareLinks
Ways to pass a page on; Copy link, the device's share sheet and email.
Last updated
Uses JavaScript
Copies the link (with a tick and a screen-reader message) and opens the device’s share sheet where the browser has one.
Without JS: Copy link and Share hide; the email link still works.
Show codeHide code
<ShareLinks title="What makes a design system work" />Add
npx @ava-ui/apogee add share-linksPulls in Button. The share sheet is the browser’s own (every app the reader has), so there is no list of networks to keep up to date.
Usage
---
import ShareLinks from '@/components/apogee/ShareLinks/ShareLinks.astro'
---
<ShareLinks title={post.title} />API
| Prop | Type | Default | Description |
|---|---|---|---|
url |
string |
the current page | The address to share. |
title |
string |
the page title | Passed to the share sheet and used as the email subject. |
copyLabel |
string |
'Copy link' |
|
copiedLabel |
string |
'Copied' |
Announced to screen readers after a copy. |
shareLabel |
string |
'Share' |
|
emailLabel |
string |
'Email' |
|
iconOnly |
boolean |
false |
Square icon buttons, named by their labels. |
size |
'small' | 'medium' |
'medium' |
|
class |
string |
— | Extra classes on the root, merged last. |
Variants
States
- Copied — the link icon turns into a tick for two seconds and “Copied” is announced.
- No share sheet — the Share button stays hidden where the browser has none (most desktops).
Examples
Under an article: Content sections.
Accessibility
- Every button has a name, including
iconOnlyones. - The copy result is announced through a polite status region.
Tokens
Reads the outline Button tokens.
Do / Don’t
- Do put it once, at the end of the article (or in a sticky sidebar).
- Don’t add a row of network logos the reader may not use; the share sheet already lists theirs.
Content
- “Copy link” says what it does; avoid “Share URL”.