Kbd

component

The KBD (Keyboard) component can be used to indicate a textual user input from the keyboard inside other elements such as in text, tables, cards, and more.

Install

php bin/console ux:install kbd \
    --kit=https://github.com/xormania/uxor:0.3.0

README Source

What it installs

Copies: templates/ → templates/
Composer: twig/html-extra:^3.24.0
symfony/ux-twig-component:^3.5
tales-from-a-dev/twig-tailwind-extra:^1.3.0

Examples (2)

Default

Light

Dark

Code

<div>
    <twig:Kbd>Shift</twig:Kbd>
    <twig:Kbd>Ctrl</twig:Kbd>
    <twig:Kbd>Tab</twig:Kbd>
    <twig:Kbd>Caps Lock</twig:Kbd>
    <twig:Kbd>Esc</twig:Kbd>
    <twig:Kbd>Spacebar</twig:Kbd>
    <twig:Kbd>Enter</twig:Kbd>
</div>

Arrow keys

Light

Dark

Code

<div>
    <twig:Kbd>
        <twig:ux:icon name="flowbite:caret-up-solid" class="h-3 w-3" aria-hidden="true" />
        <span class="sr-only">Arrow key up</span>
    </twig:Kbd>

    <twig:Kbd>
        <twig:ux:icon name="flowbite:caret-down-solid" class="h-3 w-3" aria-hidden="true" />
        <span class="sr-only">Arrow key down</span>
    </twig:Kbd>

    <twig:Kbd>
        <twig:ux:icon name="flowbite:caret-left-solid" class="h-3 w-3" aria-hidden="true" />
        <span class="sr-only">Arrow key left</span>
    </twig:Kbd>

    <twig:Kbd>
        <twig:ux:icon name="flowbite:caret-right-solid" class="h-3 w-3" aria-hidden="true" />
        <span class="sr-only">Arrow key right</span>
    </twig:Kbd>
</div>