Kbd

<div class="flex flex-wrap items-center gap-3">
    <kbd class="kbd-xs ui-solid ui-solid-primary rd-md">
        kbd xs
    </kbd>
    <kbd class="kbd-sm ui-solid ui-solid-primary rd-md">
        Kbd sm
    </kbd>
    <kbd class="kbd-md ui-solid ui-solid-primary rd-md">
        Kbd md
    </kbd>
    <kbd class="kbd-lg ui-solid ui-solid-primary rd-md">
        Kbd lg
    </kbd>
    <kbd class="kbd-xl ui-solid ui-solid-primary rd-md">
        Kbd xl
    </kbd>
</div>

<div class="flex flex-wrap items-center gap-3">
    <kbd class="kbd-md ui-solid ui-solid-gray rd-md">
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5">
            <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" />
        </svg>    
    </kbd>
    <kbd class="kbd-md rd-md ui-outline ui-outline-gray">
        <svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18v-6H5l7-7 7 7h-4v6H9z"/></svg>
    </kbd>
    <kbd class="kbd-md min-w-[30px] flex items-center justify-center text-sm rd-md ui-outline ui-outline-gray">
        /
    </kbd>
</div>

<div class="flex flex-wrap gap-3">
    <div class="flex items-center gap-x-2">
        <kbd class="kbd-md rd-md ui-solid ui-solid-gray flex items-center gap-0.5">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5">
                <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" />
            </svg> 
            +
            B                     
        </kbd>
        <span class="text-fg">
            And
        </span>
        <kbd class="kbd-md text-sm rd-md ui-solid ui-solid-gray flex items-center gap-0.5">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5">
                <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" />
            </svg> 
            + R                    
        </kbd>
    </div>
</div>