Kbd

Home Kbd

The Kbd component is used to represent keyboard input, shortcuts, or key combinations. It helps visually distinguish keys from regular text and provides a familiar appearance for documenting keyboard interactions.

<?php

use Lib\PHPXUI\Kbd;
use Lib\PHPXUI\KbdGroup;

?>

<div class="flex flex-col items-center gap-4">
    <KbdGroup>
        <Kbd>⌘</Kbd>
        <Kbd>⇧</Kbd>
        <Kbd>⌥</Kbd>
        <Kbd>⌃</Kbd>
    </KbdGroup>
    <KbdGroup>
        <Kbd>Ctrl</Kbd>
        <span>+</span>
        <Kbd>B</Kbd>
    </KbdGroup>
</div>

Installation

npm

npx phpxui add Kbd

Usage

use Lib\PHPXUI\Kbd

<Kbd>Ctrl</Kbd>

Examples

Input Group

⌘ K

Button

Group

Use{" "} Ctrl + B Ctrl + K{" "} to open the command palette

Command Palette

Installation

Usage

Examples

Tooltip

Input Group

Button

Group

Kbd const [copyName, setCopyName] = pp.state(false); const copyChildren = () => { navigator.clipboard.writeText('npx phpxui add Kbd'.trim()); setCopyName(true); setTimeout(() => { setCopyName(false); }, 2000); };

Installation

Usage

Examples

Tooltip

Input Group

Button

Group