Actions

ShareCard

Compact share card with copy-link, copy-text, and native navigator.share actions, with accessible success announcements and graceful fallback when navigator.share is unavailable.

import { ShareCard } from '@lostgradient/cinder/share-card';
actionclipboard
01

Overview

Compact share card with copy-link, copy-text, and native navigator.share actions, with accessible success announcements and graceful fallback when navigator.share is unavailable.

Usage

svelte 
<script lang="ts">
  import { ShareCard } from '@lostgradient/cinder/share-card';
</script>

Guidance

Use When

  • Offering a quick way to share a link or text with copy and native share options.
  • Presenting a result, invite link, or exported report link with sharing affordances.

Avoid When

  • Generating the share text or images — compose ShareCard with your own copy generation logic.
  • Posting directly to social media or analytics — wire those externally.
Live preview
02

When to use

Use when
  • Offering a quick way to share a link or text with copy and native share options.
  • Presenting a result, invite link, or exported report link with sharing affordances.
Avoid when
  • Generating the share text or images — compose ShareCard with your own copy generation logic.
  • Posting directly to social media or analytics — wire those externally.
03

Examples

Export result share card

A share card for a generated report link with custom actions.

04

Props

Props for share-card
Name Type Default Required Bindable Description
value text req The URL or text to share/copy.
title text Human-readable title for the share card.
description text Additional descriptive text below the title.
actions ShareCardAction[] Explicit actions to show. When omitted, default copy-link and native-share actions are rendered.
copyLinkLabel text 'Copy link' Label for the copy-link button.
copiedLabel text 'Copied!' Label shown after a successful copy.
shareLabel text 'Share' Label for the native-share button. Only shown when navigator.share is available.
confirmDuration number 2000 Duration in ms to show the copied confirmation state.
preview snippet Preview content slot rendered above the actions.