Restyle

Don’t like the kit look? It’s CSS. Paste your own rules after the k-web-ui import and they win, because they’re unlayered. How it works covers the cascade. You don’t fork a component to change its shape.

These examples keep the markup from the button and gauge pages. The extra class is yours.

Capsule buttons

.k-btn uses --k-radius, which is 2px. Round the corners and it reads as a capsule. Variants and sizes still apply.

SaveSaveCancel

<style>
  .btn-capsule {
    border-radius: 999px;
    padding-inline: 1.5rem;
  }
</style>
<button type="button" class="k-btn k-btn--primary">Save</button>
<button type="button" class="k-btn k-btn--primary btn-capsule">Save</button>
<button type="button" class="k-btn k-btn--secondary btn-capsule">Cancel</button>

Half-circle gauge

The kit gauge is three sides of a square. --k-gauge-amount is how far the fill has gone along those sides. Hide the segments and paint .k-gauge__frame from the same token. The fill runs left to right along the top of a semicircle. Both gauges take the same options; only the extra class differs.

<style>
  k-gauge.gauge-arc .k-gauge__seg {
    display: none;
  }

  k-gauge.gauge-arc .k-gauge__frame {
    --k-arc-angle: calc(270deg + var(--k-gauge-amount) * 180deg / 100%);
    border-radius: 50%;
    background:
      radial-gradient(
        circle at calc(var(--k-gauge-thickness) / 2) 50%,
        var(--k-gauge-color) calc(var(--k-gauge-thickness) / 2),
        transparent calc(var(--k-gauge-thickness) / 2 + 0.5px)
      ),
      radial-gradient(
        circle at calc(100% - var(--k-gauge-thickness) / 2) 50%,
        var(--k-gauge-track) calc(var(--k-gauge-thickness) / 2),
        transparent calc(var(--k-gauge-thickness) / 2 + 0.5px)
      ),
      radial-gradient(
        circle at
          calc(
            50% + sin(var(--k-arc-angle)) * 50% - sin(var(--k-arc-angle)) *
              var(--k-gauge-thickness) / 2
          )
          calc(
            50% - cos(var(--k-arc-angle)) * 50% + cos(var(--k-arc-angle)) *
              var(--k-gauge-thickness) / 2
          ),
        var(--k-gauge-color) calc(var(--k-gauge-thickness) / 2),
        transparent calc(var(--k-gauge-thickness) / 2 + 0.5px)
      ),
      conic-gradient(
        from 270deg,
        var(--k-gauge-color) calc(var(--k-gauge-amount) * 180deg / 100%),
        var(--k-gauge-track) calc(var(--k-gauge-amount) * 180deg / 100%) 180deg,
        transparent 180deg
      );
    -webkit-mask: radial-gradient(
      farthest-side,
      transparent calc(100% - var(--k-gauge-thickness)),
      #000 calc(100% - var(--k-gauge-thickness) + 0.5px)
    );
    mask: radial-gradient(
      farthest-side,
      transparent calc(100% - var(--k-gauge-thickness)),
      #000 calc(100% - var(--k-gauge-thickness) + 0.5px)
    );
  }

  k-gauge.gauge-arc > .k-gauge__value {
    padding-bottom: 1.35rem;
  }

  k-gauge.gauge-arc > .k-gauge__label {
    align-self: center;
    padding-top: 1.35rem;
    padding-bottom: 0;
  }
</style>
<k-gauge id="upload-square" class="k-gauge"></k-gauge>
<k-gauge id="upload-arc" class="k-gauge gauge-arc"></k-gauge>

import 'k-web-ui/js';

const reading = { value: 64, max: 100, label: 'Upload', format: '%' };

document.getElementById('upload-square').options = reading;
document.getElementById('upload-arc').options = reading;

import { Component, CUSTOM_ELEMENTS_SCHEMA, type AfterViewInit } from '@angular/core';
import 'k-web-ui/js';

@Component({
  selector: 'app-example',
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <style>
      k-gauge.gauge-arc .k-gauge__seg {
        display: none;
      }

      k-gauge.gauge-arc .k-gauge__frame {
        --k-arc-angle: calc(270deg + var(--k-gauge-amount) * 180deg / 100%);
        border-radius: 50%;
        background:
          radial-gradient(
            circle at calc(var(--k-gauge-thickness) / 2) 50%,
            var(--k-gauge-color) calc(var(--k-gauge-thickness) / 2),
            transparent calc(var(--k-gauge-thickness) / 2 + 0.5px)
          ),
          radial-gradient(
            circle at calc(100% - var(--k-gauge-thickness) / 2) 50%,
            var(--k-gauge-track) calc(var(--k-gauge-thickness) / 2),
            transparent calc(var(--k-gauge-thickness) / 2 + 0.5px)
          ),
          radial-gradient(
            circle at
              calc(
                50% + sin(var(--k-arc-angle)) * 50% - sin(var(--k-arc-angle)) *
                  var(--k-gauge-thickness) / 2
              )
              calc(
                50% - cos(var(--k-arc-angle)) * 50% + cos(var(--k-arc-angle)) *
                  var(--k-gauge-thickness) / 2
              ),
            var(--k-gauge-color) calc(var(--k-gauge-thickness) / 2),
            transparent calc(var(--k-gauge-thickness) / 2 + 0.5px)
          ),
          conic-gradient(
            from 270deg,
            var(--k-gauge-color) calc(var(--k-gauge-amount) * 180deg / 100%),
            var(--k-gauge-track) calc(var(--k-gauge-amount) * 180deg / 100%) 180deg,
            transparent 180deg
          );
        -webkit-mask: radial-gradient(
          farthest-side,
          transparent calc(100% - var(--k-gauge-thickness)),
          #000 calc(100% - var(--k-gauge-thickness) + 0.5px)
        );
        mask: radial-gradient(
          farthest-side,
          transparent calc(100% - var(--k-gauge-thickness)),
          #000 calc(100% - var(--k-gauge-thickness) + 0.5px)
        );
      }

      k-gauge.gauge-arc > .k-gauge__value {
        padding-bottom: 1.35rem;
      }

      k-gauge.gauge-arc > .k-gauge__label {
        align-self: center;
        padding-top: 1.35rem;
        padding-bottom: 0;
      }
    </style>
    <k-gauge id="upload-square" class="k-gauge"></k-gauge>
    <k-gauge id="upload-arc" class="k-gauge gauge-arc"></k-gauge>
  `,
})
export class ExampleComponent implements AfterViewInit {
  ngAfterViewInit() {
    const reading = { value: 64, max: 100, label: 'Upload', format: '%' };

    document.getElementById('upload-square').options = reading;
    document.getElementById('upload-arc').options = reading;
  }
}

import { useEffect } from 'react';
import 'k-web-ui/js';

export function Example() {
  useEffect(() => {
    const reading = { value: 64, max: 100, label: 'Upload', format: '%' };

    document.getElementById('upload-square').options = reading;
    document.getElementById('upload-arc').options = reading;
  }, []);

  return (
    <>
      <style>
        k-gauge.gauge-arc .k-gauge__seg {
          display: none;
        }

        k-gauge.gauge-arc .k-gauge__frame {
          --k-arc-angle: calc(270deg + var(--k-gauge-amount) * 180deg / 100%);
          border-radius: 50%;
          background:
            radial-gradient(
              circle at calc(var(--k-gauge-thickness) / 2) 50%,
              var(--k-gauge-color) calc(var(--k-gauge-thickness) / 2),
              transparent calc(var(--k-gauge-thickness) / 2 + 0.5px)
            ),
            radial-gradient(
              circle at calc(100% - var(--k-gauge-thickness) / 2) 50%,
              var(--k-gauge-track) calc(var(--k-gauge-thickness) / 2),
              transparent calc(var(--k-gauge-thickness) / 2 + 0.5px)
            ),
            radial-gradient(
              circle at
                calc(
                  50% + sin(var(--k-arc-angle)) * 50% - sin(var(--k-arc-angle)) *
                    var(--k-gauge-thickness) / 2
                )
                calc(
                  50% - cos(var(--k-arc-angle)) * 50% + cos(var(--k-arc-angle)) *
                    var(--k-gauge-thickness) / 2
                ),
              var(--k-gauge-color) calc(var(--k-gauge-thickness) / 2),
              transparent calc(var(--k-gauge-thickness) / 2 + 0.5px)
            ),
            conic-gradient(
              from 270deg,
              var(--k-gauge-color) calc(var(--k-gauge-amount) * 180deg / 100%),
              var(--k-gauge-track) calc(var(--k-gauge-amount) * 180deg / 100%) 180deg,
              transparent 180deg
            );
          -webkit-mask: radial-gradient(
            farthest-side,
            transparent calc(100% - var(--k-gauge-thickness)),
            #000 calc(100% - var(--k-gauge-thickness) + 0.5px)
          );
          mask: radial-gradient(
            farthest-side,
            transparent calc(100% - var(--k-gauge-thickness)),
            #000 calc(100% - var(--k-gauge-thickness) + 0.5px)
          );
        }

        k-gauge.gauge-arc > .k-gauge__value {
          padding-bottom: 1.35rem;
        }

        k-gauge.gauge-arc > .k-gauge__label {
          align-self: center;
          padding-top: 1.35rem;
          padding-bottom: 0;
        }
      </style>
      <k-gauge id="upload-square" className="k-gauge"></k-gauge>
      <k-gauge id="upload-arc" className="k-gauge gauge-arc"></k-gauge>
    </>
  );
}