Action

A button that posts, with an optional confirm: leave, remove, stop.

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

Use it

On your server

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

const html = kit.action({
      action: '/s/night-owls/leave',
      icon: 'leave',
      label: 'Leave',
      kind: 'quiet',
      confirm: 'Leave Night owls?'
  });

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.action({
        action: '/s/night-owls/leave',
        icon: 'leave',
        label: 'Leave',
        kind: 'quiet',
        confirm: 'Leave Night owls?'
    });
  OpenVibeKit.enhance(box);
</script>
The HTML it returns · 391 B
<form class="ovk-inline" method="post" action="/s/night-owls/leave" data-ovk-confirm="Leave Night owls?"><button class="ovk-btn ovk-btn--quiet" type="submit"><svg class="ovk-i" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12.7 3.5h4.2a2.1 2.1 0 0 1 2.1 2.1v12.7a2.1 2.1 0 0 1-2.1 2.1h-4.2M8.5 16.2l-4.2-4.2l4.2-4.2M4.2 12h10.6"/></svg><span>Leave</span></button></form>

What it weighs

Its own rules are 6.1 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.