Actions

Share

The one Share button: it opens the network's Share sheet, or copies the link where there is no sheet.

openvibe-shared/kitJSON

Build it

kit.share({ title: 'Night owls', url: '/r/night-owls' }) + kit.share({ title: 'Goosely is live', url: '/goosely', text: 'Come watch', small: true })

Props

id
any?
url
any?
kind
any?
text
string?
embed
any?
image
any?
label
string?
quiet
any?
small
boolean?
title
string?

Anatomy

  • buttonShare, with the up-from-a-tray icon; minHeight size.tap; weight type.weight.bold
  • sheetfrom the bottom on a phone, a 520 px dialog on a computer; Escape, the backdrop and Done close it; surface color.bg.raised; radius radius.md; padding space.lg
  • linkthe link without https:// and Copy, which turns into a tick; surface color.bg.hover; text color.text.primary; action color.accent.strong; onAction color.accent.onStrong
  • devicephones: "Send with your phone", the platform's own sheet with its contacts; minHeight size.tap
  • placesround brand tiles, the person's recent ones first, the rest behind More (n); size size.avatar; label type.size.meta
  • panelQR code, embed code or a Mastodon server, under the places; line color.line.base
  • accessthe owner only: Everyone · Anyone with the link · Specific people · Only me, the people, Transfer; muted color.text.muted

Behaviour and access

Keyboard
Standard focus order
Outside tap
Leaves it open
Scroll
The page still scrolls
Reduced motion
Remove movement; keep the state change.
Name
"Share", and the sheet is named "Share <title>"
Target
44 px
Focus
Enter opens; Tab moves; Escape closes (asking first when there are unsaved changes)

States

  • closed
  • open
  • copied
  • panel open
  • saving
  • not the owner (send only)

Tokens

  • size.tap
  • type.weight.bold
  • color.bg.raised
  • radius.md
  • space.lg
  • color.bg.hover
  • color.text.primary
  • color.accent.strong
  • color.accent.onStrong
  • size.avatar
  • type.size.meta
  • color.line.base
  • color.text.muted

Android · Jetpack Compose

OutlinedButton

@Composable fun OvShare(title: String, url: String, label: String = "Share", onShare: (title: String, url: String) -> Unit) { // The app hands the link to the platform's own sheet, with Direct Share's contacts. On Android: // context.startActivity(Intent.createChooser(Intent(Intent.ACTION_SEND).apply { type = "text/plain"; putExtra(Intent.EXTRA_TEXT, url) }, title)) OutlinedButton(onClick = { onShare(title, url) }, modifier = Modifier.heightIn(min = OvScale.SizeTap), shape = RoundedCornerShape(OvScale.RadiusPill)) { Icon(Icons.Default.Share, contentDescription = null) Spacer(Modifier.width(OvScale.SpaceSm)) Text(label, fontWeight = FontWeight.Bold) } }

iOS · SwiftUI

struct OvShare: View { let title: String let url: URL var label = "Share" var body: some View { // ShareLink is the system sheet (contacts, Messages, AirDrop, apps); the OpenVibe sheet adds QR, embed and access. ShareLink(item: url, subject: Text(title), message: Text(title)) { Label(label, systemImage: "square.and.arrow.up").fontWeight(.bold).frame(minHeight: OvScale.sizeTap) } .buttonStyle(.bordered).clipShape(RoundedRectangle(cornerRadius: OvScale.radiusMd)) } }

Markup

Default

<button class="ovk-btn ovk-btn--quiet" type="button" data-ov-share-sheet data-title="Night owls" data-url="/r/night-owls"><svg class="ovk-i" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 20V9M7 14l5-5 5 5M5 4h14"/></svg><span>Share</span></button><button class="ovk-btn ovk-btn--quiet ovk-btn--small" type="button" data-ov-share-sheet data-title="Goosely is live" data-url="/goosely" data-text="Come watch"><svg class="ovk-i" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 20V9M7 14l5-5 5 5M5 4h14"/></svg><span>Share</span></button>