Button

One clear action: primary, quiet, ghost or danger. A link with href, a form button without.

  • kit.button()
  • 1.5 KB of CSS · 39 rules
  • kit.css
  • No script needed
Go live

Use it

On your server

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

const html = kit.button({ label: 'Go live', href: '/go', icon: 'live' })
    + kit.button({ label: 'Not now', kind: 'quiet', type: 'button' })
    + kit.button({ label: 'Delete', kind: 'danger', type: 'button', 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>
  const box = document.querySelector('#here');
  box.innerHTML = OpenVibeKit.button({ label: 'Go live', href: '/go', icon: 'live' })
      + OpenVibeKit.button({ label: 'Not now', kind: 'quiet', type: 'button' })
      + OpenVibeKit.button({ label: 'Delete', kind: 'danger', type: 'button', small: true });
  OpenVibeKit.enhance(box);
</script>
The HTML it returns · 493 B
<a class="ovk-btn ovk-btn--primary" href="/go"><svg class="ovk-i" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><circle cx="12" cy="11.8" r="2"/><path d="M8.6 8.4a4.9 4.9 0 0 0 0 7.1M15.4 8.4a4.9 4.9 0 0 1 0 7.1M6.3 6.1a8.1 8.1 0 0 0 0 11.9M17.7 6.1a8.1 8.1 0 0 1 0 11.9"/></svg><span>Go live</span></a><button class="ovk-btn ovk-btn--quiet" type="button"><span>Not now</span></button><button class="ovk-btn ovk-btn--danger ovk-btn--small" type="button"><span>Delete</span></button>

What it weighs

Its own rules are 6.6 KB, 1.5 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.