Icon button

An action that is only an icon. Its label is what a screen reader says and what the tooltip shows.

  • kit.iconButton()
  • 1.0 KB of CSS · 27 rules
  • kit.css
  • No script needed

Use it

On your server

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

const html = kit.iconButton({ href: '/settings', icon: 'gear', label: 'Settings' })
    + kit.iconButton({ href: '/invite', icon: 'invite', label: 'Invite people' });

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.iconButton({ href: '/settings', icon: 'gear', label: 'Settings' })
      + OpenVibeKit.iconButton({ href: '/invite', icon: 'invite', label: 'Invite people' });
  OpenVibeKit.enhance(box);
</script>
The HTML it returns · 1.1 KB
<a class="ovk-icon-btn" href="/settings" aria-label="Settings" title="Settings"><svg class="ovk-i" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><circle cx="12" cy="12.1" r="2.3"/><path d="M17.6 14.3a1.3 1.3 0 0 0 0.2 1.5l0.1 0.1a1.5 1.5 0 1 1-2.4 2.4l-0.1-0.1a1.3 1.3 0 0 0-1.5-0.2a1.3 1.3 0 0 0-0.8 1.3V18.8a1.5 1.5 0 1 1-3.4 0v-0.1a1.3 1.3 0 0 0-0.9-1.3a1.3 1.3 0 0 0-1.5 0.2l-0.1 0.1a1.5 1.5 0 1 1-2.4-2.4l0.1-0.1a1.3 1.3 0 0 0 0.2-1.5a1.3 1.3 0 0 0-1.3-0.8H5.4a1.5 1.5 0 1 1 0-3.4h0.1a1.3 1.3 0 0 0 1.3-0.9a1.3 1.3 0 0 0-0.2-1.5l-0.1-0.1a1.5 1.5 0 1 1 2.4-2.4l0.1 0.1a1.3 1.3 0 0 0 1.5 0.2H9.8a1.3 1.3 0 0 0 0.8-1.3V5.4a1.5 1.5 0 1 1 3.4 0v0.1a1.3 1.3 0 0 0 0.8 1.3a1.3 1.3 0 0 0 1.5-0.2l0.1-0.1a1.5 1.5 0 1 1 2.4 2.4l-0.1 0.1a1.3 1.3 0 0 0-0.2 1.5V9.8a1.3 1.3 0 0 0 1.3 0.8H18.7a1.5 1.5 0 1 1 0 3.4h-0.1a1.3 1.3 0 0 0-1.3 0.8Z"/></svg></a><a class="ovk-icon-btn" href="/invite" aria-label="Invite people" title="Invite people"><svg class="ovk-i" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><circle cx="9.2" cy="8.2" r="2.9"/><path d="M3.8 18.8c0-3 2.4-4.8 5.3-4.8s5.3 2 5.3 4.8M17.9 8.2v5.3M15.3 10.9h5.3"/></svg></a>

What it weighs

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