Share

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

  • kit.share()
  • 1.4 KB of CSS · 35 rules
  • kit.css
  • kit-web.js for its behaviour

Use it

On your server

const kit = require('openvibe-shared/kit');

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

In a page that draws itself

<link rel="stylesheet" href="https://openvibe.network/shared/kit.css">
<script src="https://openvibe.network/shared/kit.js"></script>
<script src="https://openvibe.network/shared/kit-web.js" defer></script>

<script>
  const box = document.querySelector('#here');
  box.innerHTML = OpenVibeKit.share({ title: 'Night owls', url: '/r/night-owls' })
      + OpenVibeKit.share({ title: 'Goosely is live', url: '/goosely', text: 'Come watch', small: true });
  OpenVibeKit.enhance(box);
</script>
The HTML it returns · 620 B
<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 20.8V9.2M6.8 14.5l5.2-5.2l5.2 5.2M4.7 4h14.7"/></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 20.8V9.2M6.8 14.5l5.2-5.2l5.2 5.2M4.7 4h14.7"/></svg><span>Share</span></button>

What it weighs

Its own rules are 6.2 KB, 1.4 KB as sent: 8% of the kit's CSS. A page that draws it pays for the whole stylesheet once, and every other part comes free.

It is also drawn natively: Jetpack Compose and SwiftUI.