Kbd

Experimental Alpha

This library is a work-in-progress. We are releasing it early to gather feedback, but it is not ready for production.

Keyboard key components are used to represent keyboard shortcuts, hotkeys, or user input instructions in a visually distinct way. They mimic the appearance of physical keyboard keys.

TIP

Note that single character content within an <ag-kbd> tag is bumped up by a single font size scale for readability.

Examples

Vue

Lit

React

Live Preview

Default

Basic keyboard key representation with default styling.

⌘⌥⇧⌃

cntrl + shift + del⌘ + v

cntrl + shift + del⌘ + v

Variants

Semantic color variants for different contexts and visual emphasis.

⌘⌥⇧⌃

⌘⌥⇧⌃

⌘⌥⇧⌃

⌘⌥⇧⌃

⌘⌥⇧⌃

⌘⌥⇧⌃

⌘⌥⇧⌃

⌘⌥⇧⌃

⌘⌥⇧⌃

Sizes

Three size options to match different contexts and typography scales.

Small:⌘⌥⇧⌃

Medium:⌘⌥⇧⌃

Large:⌘⌥⇧⌃

With Background

Add background colors to variants for increased visual emphasis.

⌘⌥⇧⌃

⌘⌥⇧⌃

⌘⌥⇧⌃

⌘⌥⇧⌃

⌘⌥⇧⌃

⌘⌥⇧⌃

⌘⌥⇧⌃

⌘⌥⇧⌃

Bordered

Toggle border styling for different visual treatments.

With Border:⌘⌥⇧⌃

Without Border:⌘⌥⇧⌃

Combined Examples

Combining multiple properties for rich presentations.

Medium + Primary + Background:⌘⌥⇧⌃

Large + Success + Background:⌘⌥⇧⌃

Large + Warning:⌘⌥⇧⌃

View Vue Code

<template>
  <section>
    <div class="mbe4">
      <h2>Default</h2>
      <p class="mbs2 mbe3">Basic keyboard key representation with default styling.</p>
      <div class="stacked-mobile">
        <VueKbd class="mie2">⌘</VueKbd>
        <VueKbd class="mie2">⌥</VueKbd>
        <VueKbd class="mie2">⇧</VueKbd>
        <VueKbd>⌃</VueKbd>
      </div>
      <div class="mbs3">
        <VueKbd class="mie5">cntrl + shift + del</VueKbd>
        <VueKbd>⌘ + v</VueKbd>
      </div>
      <div class="mbs3">
        <VueKbd
          size="sm"
          class="mie5"
        >cntrl + shift + del</VueKbd>
        <VueKbd size="sm">⌘ + v</VueKbd>
      </div>
    </div>

    <div class="mbe4">
      <h2>Variants</h2>
      <p class="mbs2 mbe3">Semantic color variants for different contexts and visual emphasis.</p>
      <div class="stacked mbe3">
        <div class="mbe2">
          <VueKbd
            variant="default"
            class="mie2"
          >⌘</VueKbd>
          <VueKbd
            variant="default"
            class="mie2"
          >⌥</VueKbd>
          <VueKbd
            variant="default"
            class="mie2"
          >⇧</VueKbd>
          <VueKbd variant="default">⌃</VueKbd>
        </div>
        <div class="mbe2">
          <VueKbd
            variant="primary"
            class="mie2"
          >⌘</VueKbd>
          <VueKbd
            variant="primary"
            class="mie2"
          >⌥</VueKbd>
          <VueKbd
            variant="primary"
            class="mie2"
          >⇧</VueKbd>
          <VueKbd variant="primary">⌃</VueKbd>
        </div>
        <div class="mbe2">
          <VueKbd
            variant="secondary"
            class="mie2"
          >⌘</VueKbd>
          <VueKbd
            variant="secondary"
            class="mie2"
          >⌥</VueKbd>
          <VueKbd
            variant="secondary"
            class="mie2"
          >⇧</VueKbd>
          <VueKbd variant="secondary">⌃</VueKbd>
        </div>
        <div class="mbe2">
          <VueKbd
            variant="info"
            class="mie2"
          >⌘</VueKbd>
          <VueKbd
            variant="info"
            class="mie2"
          >⌥</VueKbd>
          <VueKbd
            variant="info"
            class="mie2"
          >⇧</VueKbd>
          <VueKbd variant="info">⌃</VueKbd>
        </div>
        <div class="mbe2">
          <VueKbd
            variant="warning"
            class="mie2"
          >⌘</VueKbd>
          <VueKbd
            variant="warning"
            class="mie2"
          >⌥</VueKbd>
          <VueKbd
            variant="warning"
            class="mie2"
          >⇧</VueKbd>
          <VueKbd variant="warning">⌃</VueKbd>
        </div>
        <div class="mbe2">
          <VueKbd
            variant="success"
            class="mie2"
          >⌘</VueKbd>
          <VueKbd
            variant="success"
            class="mie2"
          >⌥</VueKbd>
          <VueKbd
            variant="success"
            class="mie2"
          >⇧</VueKbd>
          <VueKbd variant="success">⌃</VueKbd>
        </div>
        <div class="mbe2">
          <VueKbd
            variant="danger"
            class="mie2"
          >⌘</VueKbd>
          <VueKbd
            variant="danger"
            class="mie2"
          >⌥</VueKbd>
          <VueKbd
            variant="danger"
            class="mie2"
          >⇧</VueKbd>
          <VueKbd variant="danger">⌃</VueKbd>
        </div>
        <div class="mbe2">
          <VueKbd
            variant="error"
            class="mie2"
          >⌘</VueKbd>
          <VueKbd
            variant="error"
            class="mie2"
          >⌥</VueKbd>
          <VueKbd
            variant="error"
            class="mie2"
          >⇧</VueKbd>
          <VueKbd variant="error">⌃</VueKbd>
        </div>
        <div class="mbe2">
          <VueKbd
            variant="monochrome"
            class="mie2"
          >⌘</VueKbd>
          <VueKbd
            variant="monochrome"
            class="mie2"
          >⌥</VueKbd>
          <VueKbd
            variant="monochrome"
            class="mie2"
          >⇧</VueKbd>
          <VueKbd variant="monochrome">⌃</VueKbd>
        </div>
      </div>
    </div>

    <div class="mbe4">
      <h2>Sizes</h2>
      <p class="mbs2 mbe3">Three size options to match different contexts and typography scales.</p>
      <div class="stacked">
        <div class="mbe2">
          <strong class="mie2">Small:</strong>
          <VueKbd
            size="sm"
            class="mie2"
          >⌘</VueKbd>
          <VueKbd
            size="sm"
            class="mie2"
          >⌥</VueKbd>
          <VueKbd
            size="sm"
            class="mie2"
          >⇧</VueKbd>
          <VueKbd size="sm">⌃</VueKbd>
        </div>
        <div class="mbe2">
          <strong class="mie2">Medium:</strong>
          <VueKbd
            size="md"
            class="mie2"
          >⌘</VueKbd>
          <VueKbd
            size="md"
            class="mie2"
          >⌥</VueKbd>
          <VueKbd
            size="md"
            class="mie2"
          >⇧</VueKbd>
          <VueKbd size="md">⌃</VueKbd>
        </div>
        <div class="mbe2">
          <strong class="mie2">Large:</strong>
          <VueKbd
            size="lg"
            class="mie2"
          >⌘</VueKbd>
          <VueKbd
            size="lg"
            class="mie2"
          >⌥</VueKbd>
          <VueKbd
            size="lg"
            class="mie2"
          >⇧</VueKbd>
          <VueKbd size="lg">⌃</VueKbd>
        </div>
      </div>
    </div>

    <div class="mbe4">
      <h2>With Background</h2>
      <p class="mbs2 mbe3">Add background colors to variants for increased visual emphasis.</p>
      <div class="stacked mbe3">
        <div class="mbe2">
          <VueKbd
            :background="true"
            variant="primary"
            class="mie2"
          >⌘</VueKbd>
          <VueKbd
            :background="true"
            variant="primary"
            class="mie2"
          >⌥</VueKbd>
          <VueKbd
            :background="true"
            variant="primary"
            class="mie2"
          >⇧</VueKbd>
          <VueKbd
            :background="true"
            variant="primary"
          >⌃</VueKbd>
        </div>
        <div class="mbe2">
          <VueKbd
            :background="true"
            variant="secondary"
            class="mie2"
          >⌘</VueKbd>
          <VueKbd
            :background="true"
            variant="secondary"
            class="mie2"
          >⌥</VueKbd>
          <VueKbd
            :background="true"
            variant="secondary"
            class="mie2"
          >⇧</VueKbd>
          <VueKbd
            :background="true"
            variant="secondary"
          >⌃</VueKbd>
        </div>
        <div class="mbe2">
          <VueKbd
            :background="true"
            variant="info"
            class="mie2"
          >⌘</VueKbd>
          <VueKbd
            :background="true"
            variant="info"
            class="mie2"
          >⌥</VueKbd>
          <VueKbd
            :background="true"
            variant="info"
            class="mie2"
          >⇧</VueKbd>
          <VueKbd
            :background="true"
            variant="info"
          >⌃</VueKbd>
        </div>
        <div class="mbe2">
          <VueKbd
            :background="true"
            variant="warning"
            class="mie2"
          >⌘</VueKbd>
          <VueKbd
            :background="true"
            variant="warning"
            class="mie2"
          >⌥</VueKbd>
          <VueKbd
            :background="true"
            variant="warning"
            class="mie2"
          >⇧</VueKbd>
          <VueKbd
            :background="true"
            variant="warning"
          >⌃</VueKbd>
        </div>
        <div class="mbe2">
          <VueKbd
            :background="true"
            variant="success"
            class="mie2"
          >⌘</VueKbd>
          <VueKbd
            :background="true"
            variant="success"
            class="mie2"
          >⌥</VueKbd>
          <VueKbd
            :background="true"
            variant="success"
            class="mie2"
          >⇧</VueKbd>
          <VueKbd
            :background="true"
            variant="success"
          >⌃</VueKbd>
        </div>
        <div class="mbe2">
          <VueKbd
            :background="true"
            variant="danger"
            class="mie2"
          >⌘</VueKbd>
          <VueKbd
            :background="true"
            variant="danger"
            class="mie2"
          >⌥</VueKbd>
          <VueKbd
            :background="true"
            variant="danger"
            class="mie2"
          >⇧</VueKbd>
          <VueKbd
            :background="true"
            variant="danger"
          >⌃</VueKbd>
        </div>
        <div class="mbe2">
          <VueKbd
            :background="true"
            variant="error"
            class="mie2"
          >⌘</VueKbd>
          <VueKbd
            :background="true"
            variant="error"
            class="mie2"
          >⌥</VueKbd>
          <VueKbd
            :background="true"
            variant="error"
            class="mie2"
          >⇧</VueKbd>
          <VueKbd
            :background="true"
            variant="error"
          >⌃</VueKbd>
        </div>
        <div class="mbe2">
          <VueKbd
            :background="true"
            variant="monochrome"
            class="mie2"
          >⌘</VueKbd>
          <VueKbd
            :background="true"
            variant="monochrome"
            class="mie2"
          >⌥</VueKbd>
          <VueKbd
            :background="true"
            variant="monochrome"
            class="mie2"
          >⇧</VueKbd>
          <VueKbd
            :background="true"
            variant="monochrome"
          >⌃</VueKbd>
        </div>
      </div>
    </div>

    <div class="mbe4">
      <h2>Bordered</h2>
      <p class="mbs2 mbe3">Toggle border styling for different visual treatments.</p>
      <div class="stacked-mobile mbe3">
        <div class="mbe2">
          <strong class="mie2">With Border:</strong>
          <VueKbd
            :bordered="true"
            class="mie2"
          >⌘</VueKbd>
          <VueKbd
            :bordered="true"
            class="mie2"
          >⌥</VueKbd>
          <VueKbd
            :bordered="true"
            class="mie2"
          >⇧</VueKbd>
          <VueKbd :bordered="true">⌃</VueKbd>
        </div>
        <div class="mbe2">
          <strong class="mie2">Without Border:</strong>
          <VueKbd
            :bordered="false"
            class="mie2"
          >⌘</VueKbd>
          <VueKbd
            :bordered="false"
            class="mie2"
          >⌥</VueKbd>
          <VueKbd
            :bordered="false"
            class="mie2"
          >⇧</VueKbd>
          <VueKbd :bordered="false">⌃</VueKbd>
        </div>
      </div>
    </div>

    <div class="mbe4">
      <h2>Combined Examples</h2>
      <p class="mbs2 mbe3">Combining multiple properties for rich presentations.</p>
      <div class="stacked">
        <div class="mbe2">
          <strong class="mie2">Medium + Primary + Background:</strong>
          <VueKbd
            size="md"
            :background="true"
            variant="primary"
            class="mie2"
          >⌘</VueKbd>
          <VueKbd
            size="md"
            :background="true"
            variant="primary"
            class="mie2"
          >⌥</VueKbd>
          <VueKbd
            size="md"
            :background="true"
            variant="primary"
            class="mie2"
          >⇧</VueKbd>
          <VueKbd
            size="md"
            :background="true"
            variant="primary"
          >⌃</VueKbd>
        </div>
        <div class="mbe2">
          <strong class="mie2">Large + Success + Background:</strong>
          <VueKbd
            size="lg"
            :background="true"
            variant="success"
            class="mie2"
          >⌘</VueKbd>
          <VueKbd
            size="lg"
            :background="true"
            variant="success"
            class="mie2"
          >⌥</VueKbd>
          <VueKbd
            size="lg"
            :background="true"
            variant="success"
            class="mie2"
          >⇧</VueKbd>
          <VueKbd
            size="lg"
            :background="true"
            variant="success"
          >⌃</VueKbd>
        </div>
        <div class="mbe2">
          <strong class="mie2">Large + Warning:</strong>
          <VueKbd
            size="lg"
            variant="warning"
            class="mie2"
          >⌘</VueKbd>
          <VueKbd
            size="lg"
            variant="warning"
            class="mie2"
          >⌥</VueKbd>
          <VueKbd
            size="lg"
            variant="warning"
            class="mie2"
          >⇧</VueKbd>
          <VueKbd
            size="lg"
            variant="warning"
          >⌃</VueKbd>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
import { VueKbd } from "agnosticui-core/kbd/vue";
</script>

Live Preview

View Lit / Web Component Code

import { LitElement, html } from 'lit';
import 'agnosticui-core/kbd';

export class KbdLitExamples extends LitElement {
  createRenderRoot() {
    return this;
  }

  render() {
    return html`
      <section>
        <div class="mbe4">
          <h2>Default</h2>
          <p class="mbs2 mbe3">Basic keyboard key representation with default styling.</p>
          <div class="stacked-mobile">
            <ag-kbd class="mie2">⌘</ag-kbd>
            <ag-kbd class="mie2">⌥</ag-kbd>
            <ag-kbd class="mie2">⇧</ag-kbd>
            <ag-kbd>⌃</ag-kbd>
          </div>
          <div class="mbs3">
            <ag-kbd class="mie5">cntrl + shift + del</ag-kbd>
            <ag-kbd>⌘ + v</ag-kbd>
          </div>
          <div class="mbs3">
            <ag-kbd size="sm" class="mie5">cntrl + shift + del</ag-kbd>
            <ag-kbd size="sm">⌘ + v</ag-kbd>
          </div>
        </div>

        <div class="mbe4">
          <h2>Variants</h2>
          <p class="mbs2 mbe3">Semantic color variants for different contexts and visual emphasis.</p>
          <div class="stacked mbe3">
            <div class="mbe2">
              <ag-kbd variant="default" class="mie2">⌘</ag-kbd>
              <ag-kbd variant="default" class="mie2">⌥</ag-kbd>
              <ag-kbd variant="default" class="mie2">⇧</ag-kbd>
              <ag-kbd variant="default">⌃</ag-kbd>
            </div>
            <div class="mbe2">
              <ag-kbd variant="primary" class="mie2">⌘</ag-kbd>
              <ag-kbd variant="primary" class="mie2">⌥</ag-kbd>
              <ag-kbd variant="primary" class="mie2">⇧</ag-kbd>
              <ag-kbd variant="primary">⌃</ag-kbd>
            </div>
            <div class="mbe2">
              <ag-kbd variant="secondary" class="mie2">⌘</ag-kbd>
              <ag-kbd variant="secondary" class="mie2">⌥</ag-kbd>
              <ag-kbd variant="secondary" class="mie2">⇧</ag-kbd>
              <ag-kbd variant="secondary">⌃</ag-kbd>
            </div>
            <div class="mbe2">
              <ag-kbd variant="info" class="mie2">⌘</ag-kbd>
              <ag-kbd variant="info" class="mie2">⌥</ag-kbd>
              <ag-kbd variant="info" class="mie2">⇧</ag-kbd>
              <ag-kbd variant="info">⌃</ag-kbd>
            </div>
            <div class="mbe2">
              <ag-kbd variant="warning" class="mie2">⌘</ag-kbd>
              <ag-kbd variant="warning" class="mie2">⌥</ag-kbd>
              <ag-kbd variant="warning" class="mie2">⇧</ag-kbd>
              <ag-kbd variant="warning">⌃</ag-kbd>
            </div>
            <div class="mbe2">
              <ag-kbd variant="success" class="mie2">⌘</ag-kbd>
              <ag-kbd variant="success" class="mie2">⌥</ag-kbd>
              <ag-kbd variant="success" class="mie2">⇧</ag-kbd>
              <ag-kbd variant="success">⌃</ag-kbd>
            </div>
            <div class="mbe2">
              <ag-kbd variant="danger" class="mie2">⌘</ag-kbd>
              <ag-kbd variant="danger" class="mie2">⌥</ag-kbd>
              <ag-kbd variant="danger" class="mie2">⇧</ag-kbd>
              <ag-kbd variant="danger">⌃</ag-kbd>
            </div>
            <div class="mbe2">
              <ag-kbd variant="error" class="mie2">⌘</ag-kbd>
              <ag-kbd variant="error" class="mie2">⌥</ag-kbd>
              <ag-kbd variant="error" class="mie2">⇧</ag-kbd>
              <ag-kbd variant="error">⌃</ag-kbd>
            </div>
            <div class="mbe2">
              <ag-kbd variant="monochrome" class="mie2">⌘</ag-kbd>
              <ag-kbd variant="monochrome" class="mie2">⌥</ag-kbd>
              <ag-kbd variant="monochrome" class="mie2">⇧</ag-kbd>
              <ag-kbd variant="monochrome">⌃</ag-kbd>
            </div>
          </div>
        </div>

        <div class="mbe4">
          <h2>Sizes</h2>
          <p class="mbs2 mbe3">Three size options to match different contexts and typography scales.</p>
          <div class="stacked">
            <div class="mbe2">
              <strong class="mie2">Small:</strong>
              <ag-kbd size="sm" class="mie2">⌘</ag-kbd>
              <ag-kbd size="sm" class="mie2">⌥</ag-kbd>
              <ag-kbd size="sm" class="mie2">⇧</ag-kbd>
              <ag-kbd size="sm">⌃</ag-kbd>
            </div>
            <div class="mbe2">
              <strong class="mie2">Medium:</strong>
              <ag-kbd size="md" class="mie2">⌘</ag-kbd>
              <ag-kbd size="md" class="mie2">⌥</ag-kbd>
              <ag-kbd size="md" class="mie2">⇧</ag-kbd>
              <ag-kbd size="md">⌃</ag-kbd>
            </div>
            <div class="mbe2">
              <strong class="mie2">Large:</strong>
              <ag-kbd size="lg" class="mie2">⌘</ag-kbd>
              <ag-kbd size="lg" class="mie2">⌥</ag-kbd>
              <ag-kbd size="lg" class="mie2">⇧</ag-kbd>
              <ag-kbd size="lg">⌃</ag-kbd>
            </div>
          </div>
        </div>

        <div class="mbe4">
          <h2>With Background</h2>
          <p class="mbs2 mbe3">Add background colors to variants for increased visual emphasis.</p>
          <div class="stacked mbe3">
            <div class="mbe2">
              <ag-kbd background variant="primary" class="mie2">⌘</ag-kbd>
              <ag-kbd background variant="primary" class="mie2">⌥</ag-kbd>
              <ag-kbd background variant="primary" class="mie2">⇧</ag-kbd>
              <ag-kbd background variant="primary">⌃</ag-kbd>
            </div>
            <div class="mbe2">
              <ag-kbd background variant="secondary" class="mie2">⌘</ag-kbd>
              <ag-kbd background variant="secondary" class="mie2">⌥</ag-kbd>
              <ag-kbd background variant="secondary" class="mie2">⇧</ag-kbd>
              <ag-kbd background variant="secondary">⌃</ag-kbd>
            </div>
            <div class="mbe2">
              <ag-kbd background variant="info" class="mie2">⌘</ag-kbd>
              <ag-kbd background variant="info" class="mie2">⌥</ag-kbd>
              <ag-kbd background variant="info" class="mie2">⇧</ag-kbd>
              <ag-kbd background variant="info">⌃</ag-kbd>
            </div>
            <div class="mbe2">
              <ag-kbd background variant="warning" class="mie2">⌘</ag-kbd>
              <ag-kbd background variant="warning" class="mie2">⌥</ag-kbd>
              <ag-kbd background variant="warning" class="mie2">⇧</ag-kbd>
              <ag-kbd background variant="warning">⌃</ag-kbd>
            </div>
            <div class="mbe2">
              <ag-kbd background variant="success" class="mie2">⌘</ag-kbd>
              <ag-kbd background variant="success" class="mie2">⌥</ag-kbd>
              <ag-kbd background variant="success" class="mie2">⇧</ag-kbd>
              <ag-kbd background variant="success">⌃</ag-kbd>
            </div>
            <div class="mbe2">
              <ag-kbd background variant="danger" class="mie2">⌘</ag-kbd>
              <ag-kbd background variant="danger" class="mie2">⌥</ag-kbd>
              <ag-kbd background variant="danger" class="mie2">⇧</ag-kbd>
              <ag-kbd background variant="danger">⌃</ag-kbd>
            </div>
            <div class="mbe2">
              <ag-kbd background variant="error" class="mie2">⌘</ag-kbd>
              <ag-kbd background variant="error" class="mie2">⌥</ag-kbd>
              <ag-kbd background variant="error" class="mie2">⇧</ag-kbd>
              <ag-kbd background variant="error">⌃</ag-kbd>
            </div>
            <div class="mbe2">
              <ag-kbd background variant="monochrome" class="mie2">⌘</ag-kbd>
              <ag-kbd background variant="monochrome" class="mie2">⌥</ag-kbd>
              <ag-kbd background variant="monochrome" class="mie2">⇧</ag-kbd>
              <ag-kbd background variant="monochrome">⌃</ag-kbd>
            </div>
          </div>
        </div>

        <div class="mbe4">
          <h2>Bordered</h2>
          <p class="mbs2 mbe3">Toggle border styling for different visual treatments.</p>
          <div class="stacked-mobile mbe3">
            <div class="mbe2">
              <strong class="mie2">With Border:</strong>
              <ag-kbd bordered class="mie2">⌘</ag-kbd>
              <ag-kbd bordered class="mie2">⌥</ag-kbd>
              <ag-kbd bordered class="mie2">⇧</ag-kbd>
              <ag-kbd bordered>⌃</ag-kbd>
            </div>
            <div class="mbe2">
              <strong class="mie2">Without Border:</strong>
              <ag-kbd .bordered=${false} class="mie2">⌘</ag-kbd>
              <ag-kbd .bordered=${false} class="mie2">⌥</ag-kbd>
              <ag-kbd .bordered=${false} class="mie2">⇧</ag-kbd>
              <ag-kbd .bordered=${false}>⌃</ag-kbd>
            </div>
          </div>
        </div>

        <div class="mbe4">
          <h2>Combined Examples</h2>
          <p class="mbs2 mbe3">Combining multiple properties for rich presentations.</p>
          <div class="stacked">
            <div class="mbe2">
              <strong class="mie2">Medium + Primary + Background:</strong>
              <ag-kbd size="md" background variant="primary" class="mie2">⌘</ag-kbd>
              <ag-kbd size="md" background variant="primary" class="mie2">⌥</ag-kbd>
              <ag-kbd size="md" background variant="primary" class="mie2">⇧</ag-kbd>
              <ag-kbd size="md" background variant="primary">⌃</ag-kbd>
            </div>
            <div class="mbe2">
              <strong class="mie2">Large + Success + Background:</strong>
              <ag-kbd size="lg" background variant="success" class="mie2">⌘</ag-kbd>
              <ag-kbd size="lg" background variant="success" class="mie2">⌥</ag-kbd>
              <ag-kbd size="lg" background variant="success" class="mie2">⇧</ag-kbd>
              <ag-kbd size="lg" background variant="success">⌃</ag-kbd>
            </div>
            <div class="mbe2">
              <strong class="mie2">Large + Warning:</strong>
              <ag-kbd size="lg" variant="warning" class="mie2">⌘</ag-kbd>
              <ag-kbd size="lg" variant="warning" class="mie2">⌥</ag-kbd>
              <ag-kbd size="lg" variant="warning" class="mie2">⇧</ag-kbd>
              <ag-kbd size="lg" variant="warning">⌃</ag-kbd>
            </div>
          </div>
        </div>
      </section>
    `;
  }
}

// Register the custom element
customElements.define('kbd-lit-examples', KbdLitExamples);

Interactive Preview: Click the "Open in StackBlitz" button below to see this example running live in an interactive playground.

View React Code

import { ReactKbd } from "agnosticui-core/kbd/react";

export default function KbdReactExamples() {
  return (
    <section>
      <div className="mbe4">
        <h2>Default</h2>
        <p className="mbs2 mbe3">Basic keyboard key representation with default styling.</p>
        <div className="stacked-mobile">
          <ReactKbd className="mie2">⌘</ReactKbd>
          <ReactKbd className="mie2">⌥</ReactKbd>
          <ReactKbd className="mie2">⇧</ReactKbd>
          <ReactKbd>⌃</ReactKbd>
        </div>
        <div className="mbs3">
          <ReactKbd className="mie5">cntrl + shift + del</ReactKbd>
          <ReactKbd>⌘ + v</ReactKbd>
        </div>
        <div className="mbs3">
          <ReactKbd size="sm" className="mie5">cntrl + shift + del</ReactKbd>
          <ReactKbd size="sm">⌘ + v</ReactKbd>
        </div>
      </div>

      <div className="mbe4">
        <h2>Variants</h2>
        <p className="mbs2 mbe3">Semantic color variants for different contexts and visual emphasis.</p>
        <div className="stacked mbe3">
          <div className="mbe2">
            <ReactKbd variant="default" className="mie2">⌘</ReactKbd>
            <ReactKbd variant="default" className="mie2">⌥</ReactKbd>
            <ReactKbd variant="default" className="mie2">⇧</ReactKbd>
            <ReactKbd variant="default">⌃</ReactKbd>
          </div>
          <div className="mbe2">
            <ReactKbd variant="primary" className="mie2">⌘</ReactKbd>
            <ReactKbd variant="primary" className="mie2">⌥</ReactKbd>
            <ReactKbd variant="primary" className="mie2">⇧</ReactKbd>
            <ReactKbd variant="primary">⌃</ReactKbd>
          </div>
          <div className="mbe2">
            <ReactKbd variant="secondary" className="mie2">⌘</ReactKbd>
            <ReactKbd variant="secondary" className="mie2">⌥</ReactKbd>
            <ReactKbd variant="secondary" className="mie2">⇧</ReactKbd>
            <ReactKbd variant="secondary">⌃</ReactKbd>
          </div>
          <div className="mbe2">
            <ReactKbd variant="info" className="mie2">⌘</ReactKbd>
            <ReactKbd variant="info" className="mie2">⌥</ReactKbd>
            <ReactKbd variant="info" className="mie2">⇧</ReactKbd>
            <ReactKbd variant="info">⌃</ReactKbd>
          </div>
          <div className="mbe2">
            <ReactKbd variant="warning" className="mie2">⌘</ReactKbd>
            <ReactKbd variant="warning" className="mie2">⌥</ReactKbd>
            <ReactKbd variant="warning" className="mie2">⇧</ReactKbd>
            <ReactKbd variant="warning">⌃</ReactKbd>
          </div>
          <div className="mbe2">
            <ReactKbd variant="success" className="mie2">⌘</ReactKbd>
            <ReactKbd variant="success" className="mie2">⌥</ReactKbd>
            <ReactKbd variant="success" className="mie2">⇧</ReactKbd>
            <ReactKbd variant="success">⌃</ReactKbd>
          </div>
          <div className="mbe2">
            <ReactKbd variant="danger" className="mie2">⌘</ReactKbd>
            <ReactKbd variant="danger" className="mie2">⌥</ReactKbd>
            <ReactKbd variant="danger" className="mie2">⇧</ReactKbd>
            <ReactKbd variant="danger">⌃</ReactKbd>
          </div>
          <div className="mbe2">
            <ReactKbd variant="error" className="mie2">⌘</ReactKbd>
            <ReactKbd variant="error" className="mie2">⌥</ReactKbd>
            <ReactKbd variant="error" className="mie2">⇧</ReactKbd>
            <ReactKbd variant="error">⌃</ReactKbd>
          </div>
          <div className="mbe2">
            <ReactKbd variant="monochrome" className="mie2">⌘</ReactKbd>
            <ReactKbd variant="monochrome" className="mie2">⌥</ReactKbd>
            <ReactKbd variant="monochrome" className="mie2">⇧</ReactKbd>
            <ReactKbd variant="monochrome">⌃</ReactKbd>
          </div>
        </div>
      </div>

      <div className="mbe4">
        <h2>Sizes</h2>
        <p className="mbs2 mbe3">Three size options to match different contexts and typography scales.</p>
        <div className="stacked">
          <div className="mbe2">
            <strong className="mie2">Small:</strong>
            <ReactKbd size="sm" className="mie2">⌘</ReactKbd>
            <ReactKbd size="sm" className="mie2">⌥</ReactKbd>
            <ReactKbd size="sm" className="mie2">⇧</ReactKbd>
            <ReactKbd size="sm">⌃</ReactKbd>
          </div>
          <div className="mbe2">
            <strong className="mie2">Medium:</strong>
            <ReactKbd size="md" className="mie2">⌘</ReactKbd>
            <ReactKbd size="md" className="mie2">⌥</ReactKbd>
            <ReactKbd size="md" className="mie2">⇧</ReactKbd>
            <ReactKbd size="md">⌃</ReactKbd>
          </div>
          <div className="mbe2">
            <strong className="mie2">Large:</strong>
            <ReactKbd size="lg" className="mie2">⌘</ReactKbd>
            <ReactKbd size="lg" className="mie2">⌥</ReactKbd>
            <ReactKbd size="lg" className="mie2">⇧</ReactKbd>
            <ReactKbd size="lg">⌃</ReactKbd>
          </div>
        </div>
      </div>

      <div className="mbe4">
        <h2>With Background</h2>
        <p className="mbs2 mbe3">Add background colors to variants for increased visual emphasis.</p>
        <div className="stacked mbe3">
          <div className="mbe2">
            <ReactKbd background={true} variant="primary" className="mie2">⌘</ReactKbd>
            <ReactKbd background={true} variant="primary" className="mie2">⌥</ReactKbd>
            <ReactKbd background={true} variant="primary" className="mie2">⇧</ReactKbd>
            <ReactKbd background={true} variant="primary">⌃</ReactKbd>
          </div>
          <div className="mbe2">
            <ReactKbd background={true} variant="secondary" className="mie2">⌘</ReactKbd>
            <ReactKbd background={true} variant="secondary" className="mie2">⌥</ReactKbd>
            <ReactKbd background={true} variant="secondary" className="mie2">⇧</ReactKbd>
            <ReactKbd background={true} variant="secondary">⌃</ReactKbd>
          </div>
          <div className="mbe2">
            <ReactKbd background={true} variant="info" className="mie2">⌘</ReactKbd>
            <ReactKbd background={true} variant="info" className="mie2">⌥</ReactKbd>
            <ReactKbd background={true} variant="info" className="mie2">⇧</ReactKbd>
            <ReactKbd background={true} variant="info">⌃</ReactKbd>
          </div>
          <div className="mbe2">
            <ReactKbd background={true} variant="warning" className="mie2">⌘</ReactKbd>
            <ReactKbd background={true} variant="warning" className="mie2">⌥</ReactKbd>
            <ReactKbd background={true} variant="warning" className="mie2">⇧</ReactKbd>
            <ReactKbd background={true} variant="warning">⌃</ReactKbd>
          </div>
          <div className="mbe2">
            <ReactKbd background={true} variant="success" className="mie2">⌘</ReactKbd>
            <ReactKbd background={true} variant="success" className="mie2">⌥</ReactKbd>
            <ReactKbd background={true} variant="success" className="mie2">⇧</ReactKbd>
            <ReactKbd background={true} variant="success">⌃</ReactKbd>
          </div>
          <div className="mbe2">
            <ReactKbd background={true} variant="danger" className="mie2">⌘</ReactKbd>
            <ReactKbd background={true} variant="danger" className="mie2">⌥</ReactKbd>
            <ReactKbd background={true} variant="danger" className="mie2">⇧</ReactKbd>
            <ReactKbd background={true} variant="danger">⌃</ReactKbd>
          </div>
          <div className="mbe2">
            <ReactKbd background={true} variant="error" className="mie2">⌘</ReactKbd>
            <ReactKbd background={true} variant="error" className="mie2">⌥</ReactKbd>
            <ReactKbd background={true} variant="error" className="mie2">⇧</ReactKbd>
            <ReactKbd background={true} variant="error">⌃</ReactKbd>
          </div>
          <div className="mbe2">
            <ReactKbd background={true} variant="monochrome" className="mie2">⌘</ReactKbd>
            <ReactKbd background={true} variant="monochrome" className="mie2">⌥</ReactKbd>
            <ReactKbd background={true} variant="monochrome" className="mie2">⇧</ReactKbd>
            <ReactKbd background={true} variant="monochrome">⌃</ReactKbd>
          </div>
        </div>
      </div>

      <div className="mbe4">
        <h2>Bordered</h2>
        <p className="mbs2 mbe3">Toggle border styling for different visual treatments.</p>
        <div className="stacked-mobile mbe3">
          <div className="mbe2">
            <strong className="mie2">With Border:</strong>
            <ReactKbd bordered={true} className="mie2">⌘</ReactKbd>
            <ReactKbd bordered={true} className="mie2">⌥</ReactKbd>
            <ReactKbd bordered={true} className="mie2">⇧</ReactKbd>
            <ReactKbd bordered={true}>⌃</ReactKbd>
          </div>
          <div className="mbe2">
            <strong className="mie2">Without Border:</strong>
            <ReactKbd bordered={false} className="mie2">⌘</ReactKbd>
            <ReactKbd bordered={false} className="mie2">⌥</ReactKbd>
            <ReactKbd bordered={false} className="mie2">⇧</ReactKbd>
            <ReactKbd bordered={false}>⌃</ReactKbd>
          </div>
        </div>
      </div>

      <div className="mbe4">
        <h2>Combined Examples</h2>
        <p className="mbs2 mbe3">Combining multiple properties for rich presentations.</p>
        <div className="stacked">
          <div className="mbe2">
            <strong className="mie2">Medium + Primary + Background:</strong>
            <ReactKbd size="md" background={true} variant="primary" className="mie2">⌘</ReactKbd>
            <ReactKbd size="md" background={true} variant="primary" className="mie2">⌥</ReactKbd>
            <ReactKbd size="md" background={true} variant="primary" className="mie2">⇧</ReactKbd>
            <ReactKbd size="md" background={true} variant="primary">⌃</ReactKbd>
          </div>
          <div className="mbe2">
            <strong className="mie2">Large + Success + Background:</strong>
            <ReactKbd size="lg" background={true} variant="success" className="mie2">⌘</ReactKbd>
            <ReactKbd size="lg" background={true} variant="success" className="mie2">⌥</ReactKbd>
            <ReactKbd size="lg" background={true} variant="success" className="mie2">⇧</ReactKbd>
            <ReactKbd size="lg" background={true} variant="success">⌃</ReactKbd>
          </div>
          <div className="mbe2">
            <strong className="mie2">Large + Warning:</strong>
            <ReactKbd size="lg" variant="warning" className="mie2">⌘</ReactKbd>
            <ReactKbd size="lg" variant="warning" className="mie2">⌥</ReactKbd>
            <ReactKbd size="lg" variant="warning" className="mie2">⇧</ReactKbd>
            <ReactKbd size="lg" variant="warning">⌃</ReactKbd>
          </div>
        </div>
      </div>
    </section>
  );
}

Open in StackBlitz

Usage

TIP

The framework examples below import AgnosticUI as an npm package. Alternatively, you can use the CLI for complete control, AI/LLM visibility, and full code ownership:

npx ag init --framework FRAMEWORK # react, vue, lit, svelte, etc.
npx ag add Kbd

The CLI copies source code directly into your project, giving you full visibility and control. After running npx ag add, you'll receive exact import instructions.

Vue

<template>
  <VueKbd variant="primary" size="md" :bordered="true"> ⌘ </VueKbd>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import { VueKbd } from "agnosticui-core/kbd/vue";
export default defineComponent({
  components: { VueKbd },
});
</script>

React

import { ReactKbd } from "agnosticui-core/kbd/react";

export default function Example() {
  return (
    <ReactKbd variant="primary" size="md" bordered>
      ⌘
    </ReactKbd>
  );
}

Lit (Web Components)

<script type="module">
  import "agnosticui-core/kbd";
</script>
<ag-kbd variant="primary" size="md" bordered>⌘</ag-kbd>

Props

Prop	Type	Default	Description
variant	'default' | 'primary' | 'secondary' | 'info' | 'warning' | 'success' | 'danger' | 'error'	'default'	The visual variant of the kbd element (e.g., for color theming).
size	'sm' | 'md' | 'lg'	'sm'	The size of the kbd element. Small is suitable for inline text, medium for emphasized shortcuts, and large for prominent displays.
bordered	boolean	true	If true, displays a border around the kbd element to enhance the key appearance.
background	boolean	false	If true, adds a background color to the kbd element based on the variant, providing additional visual emphasis.

CSS Shadow Parts

Part	Description
ag-kbd-wrapper	The main wrapper element for the kbd's content.

Customization Example

ag-kbd.custom-kbd::part(ag-kbd-wrapper) {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-weight: 700;
  padding: 0.5rem 0.75rem;
  border: 2px solid #764ba2;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
}

ag-kbd.flat-kbd::part(ag-kbd-wrapper) {
  background: #f5f5f5;
  color: #333;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 0.25rem 0.5rem;
  font-family: "Monaco", "Courier New", monospace;
}

Accessibility

The kbd component uses the semantic <kbd> HTML element, which is automatically recognized by screen readers as representing keyboard input. The component preserves the natural text content for screen reader announcement. When using special characters or symbols (like ⌘, ⌥, ⇧, ⌃), ensure they are properly announced by including appropriate aria-label attributes if needed for clarity.

Notes

• Variants: The 'default' variant provides neutral styling suitable for most contexts. Use semantic variants ('info', 'warning', 'error', 'success') to indicate the nature of the shortcut or action.
• Sizes: Choose 'sm' for inline documentation, 'md' for tutorial content, and 'lg' for hero sections or prominent feature callouts.
• Common Symbols: Use standard keyboard symbols for better recognition:
  • ⌘ - Command (Mac)
  • ⌥ - Option/Alt (Mac)
  • ⇧ - Shift
  • ⌃ - Control
  • Or use text like "Ctrl", "Alt", "Shift", "Enter", etc.
• Keyboard Combinations: Display multiple keys together for shortcuts (e.g., "Ctrl + Shift + Del") either as a single Kbd component or as separate components with visible separators.
• Background Mode: Enable background with semantic variants to create more visually prominent keyboard indicators, useful for tutorial overlays or highlighting critical shortcuts.
• All implementations (Vue, React, Lit) share the same underlying styles and behavior. Properties can be set via attributes (e.g., <ag-kbd bordered>) or property binding in framework templates.