# ShareLinks

> Ways to pass a page on; Copy link, the device's share sheet and email.

URL: https://apogee.avaui.dev/docs/share-links
Last updated: 2026-10-15

Ways to pass a page on; Copy link, the device's share sheet and email.

Last updated October 15, 2026

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.

```astro
<ShareLinks title="What makes a design system work" />
```

## Add

```sh
npx @ava-ui/apogee add share-links
```

Pulls 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

```astro
---
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

```astro
<ShareLinks iconOnly size="small" />
```

## 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](https://apogee.avaui.dev/docs/content-sections).

## Accessibility

-   Every button has a name, including `iconOnly` ones.
-   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”.

## Related

[

ButtonTriggers an action. Renders a <button>, or an <a> when href is set. Hue, fill and height are three separate props.

](https://apogee.avaui.dev/docs/button)[

TableOfContentsThe sections of a long page as in-page links in a named nav; one level of nesting and a current marker.

](https://apogee.avaui.dev/docs/table-of-contents)