# Share button (goodtabs UI)

Opens the native share sheet, or copies the link and says so where there is none.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/share-button.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/share-button`

## Usage

```tsx
import { ShareButton } from "@/components/ui/share-button"

<ShareButton title={post.title} text={post.summary} />
<ShareButton size="icon-sm" variant="ghost" url={post.url} />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| url | `string` | `window.location.href` | The link to share. Read at click time when omitted. |
| title | `string` |  | Title passed to the share sheet. |
| text | `string` |  | A short text passed to the share sheet. |
| label | `string` | `"Share"` | Visible label, or the accessible name on an icon size. |
| variant | `Button variant` | `"outline"` | Any shadcn button variant. |
| size | `Button size` | `"default"` | Any size. icon, icon-sm and icon-xs render the icon only. |

## When to use

- On an article, resource or product page that people pass around
- In a card toolbar or page header next to save and copy
- When you want the native share sheet on phones without a second code path

## When not to use

- For sharing with named people inside your app; build an invite flow
- When only the url needs copying and the sheet adds nothing; use the copy button
- For files or images; the Web Share API handles those differently

## Notes for agents

- It extends shadcn's Button, so every variant and size applies; onClick and children are reserved
- navigator.share needs a secure context and a user gesture, and most desktop browsers have no sheet, so the clipboard path is the common one there
- Link copied shows for two seconds in the label, the icon and an aria-live region; data-copied is set on the button meanwhile
- url defaults to the current page at click time, so it is safe in a server-rendered layout

Docs: https://ui.goodtabs.co/components/share-button