# Share Button

Share button that opens the device share sheet, with a copy-link fallback on the web. After sharing, the arrow lifts away and a check takes its place; comes as a button, card row or icon.

> Composed · Pro · Actions — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/share-button
```

## Import

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

## Variants

- `card` — Card: `npx @lumioui/cli add pro/share-button-card`
- `icon` — Icon: `npx @lumioui/cli add pro/share-button-icon`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `message?` | `string` | Text to share (or pass `url`). One of the two is required for a  meaningful share sheet. |
| `url?` | `string` | URL to share — appended to `message` on Android, separate field on iOS. |
| `title?` | `string` | Share-sheet title (iOS `options.title`, web `title`). |
| `label?` | `string` | `default` pill label (default "Share"). |
| `successLabel?` | `string` | Label while the success flip shows (default "Shared"). |
| `copiedLabel?` | `string` | Label when we fell back to the clipboard (default "Copied"). |
| `variant?` | `"default" | "icon" | "card"` | `default` pill · `icon` circular button · `card` share row. |
| `thumbnail?` | `string | ImageSourcePropType` | `card`: leading thumbnail (uri string or source). |
| `subtitle?` | `string` | `card`: subtitle under `title` (falls back to `url` host). |
| `resetAfter?` | `number` | ms before the success flip reverts (default 1600). |
| `onShare?` | `() => void` | Fires only when the share actually completed (not on dismiss). |
| `onPress?` | `(e: GestureResponderEvent) => void` | — |
| `className?` | `string` | — |

## Icons rendered

- `share` — /icons.html?i=share
- `link` — /icons.html?i=link

Source: https://lumioui.com/components/share-button