Share Button

Pro

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.

Preview

Installation

npx @lumioui/cli add pro/share-button

Usage

import { ShareButton } from "@/components/ui/share-button/share-button";
<ShareButton />

Examples

Card

Share rows on an event page: the ticket link and a group-chat invite, each a card row with its thumbnail.

Icon

The glyph-only circle where it lives: an article reader's top bar (back · bookmark · share).

API reference

Prop Type Default
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").

 "Share"
successLabel string

Label while the success flip shows (default "Shared").

 "Shared"
copiedLabel string

Label when we fell back to the clipboard (default "Copied").

 "Copied"
variant "default" | "icon" | "card"

default pill · icon circular button · card share row.

 "default"
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).

 1600
onShare () => void

Fires only when the share actually completed (not on dismiss).

 —
onPress (e: GestureResponderEvent) => void —
className string —