ShareButton
Share action that prefers native device sharing and falls back to clipboard copy.
Best for
Import
import { ShareButton } from "@enadhq/enad-react-sdk/client/storefront"When to use it
Use ShareButton when the page should let visitors pass a product, wishlist, or landing page to someone else with minimal friction.
It works best when sharing is a secondary action, not the primary conversion path.
Composition notes
Provide a stable url and add title or text when the share target benefits from richer context. The component handles the native-share-first behavior for you.
Behavior and theming guidance
Keep share affordances easy to find but visually secondary to purchase or navigation actions. If clipboard copy is the main fallback, make sure any success feedback is clear and brief.
Examples
Live examples you can edit directly in the sandbox.
Default share action
Use the basic button when native share or clipboard fallback is enough for the surrounding layout.
Component Sets
Preview the first example across the available component-set presets to compare tone, spacing, and structural defaults.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| url | string | — | No description yet. |
| title | string | — | No description yet. |
| text | string | — | No description yet. |
| label | string | Share | Label shown on the button |
| copiedLabel | string | Link copied! | Message shown after copying the link |
| copiedDuration | number | 2000 | Duration (ms) to show the copied confirmation |
| icon | string | — | Custom share icon — defaults to a built-in share icon |
| children | string | — | Optional social platform slots rendered alongside the share button |
| className | string | — | No description yet. |