Kbd

Basic Example

Keyboard keys with different sizes

const { default: Kbd } = await import('/components/data-display/kbd.js');

const { tags, $ } = Lightview;
const { div, span } = tags;

const shortcuts = div({ class: 'space-y-4' },
    div({ class: 'flex gap-2 items-center' },
        span({}, 'Save: '),
        Kbd({}, '⌘'),
        Kbd({}, 'S')
    ),
    div({ class: 'flex gap-2 items-center' },
        span({}, 'Undo: '),
        Kbd({}, '⌘'),
        Kbd({}, 'Z')
    ),
    div({ class: 'flex gap-2 items-center' },
        span({}, 'Copy: '),
        Kbd({}, '⌘'),
        Kbd({}, 'C')
    )
);

$('#demo').insert(shortcuts);