Kbd
Kbd component.
Kbd, Customization Blocks
#
Basic Usage
NEW
Ctrl
<x-kbd text="Ctrl" />
Ctrl
+
C
<x-kbd text="Ctrl" /> + <x-kbd text="C" />
Ctrl
Ctrl
Ctrl
Ctrl
<x-kbd text="Ctrl" xs /><x-kbd text="Ctrl" sm /><x-kbd text="Ctrl" md /><x-kbd text="Ctrl" lg />An option to remove shadow and borders.
Ctrl
Ctrl
Ctrl
<!-- No border, still raised --><x-kbd text="Ctrl" borderless /> <!-- Bordered, flat --><x-kbd text="Ctrl" shadowless /> <!-- What borderless alone used to do on 3.x --><x-kbd text="Ctrl" borderless shadowless />An option to display a tooltip on hover.
Esc
<x-kbd text="Esc" tooltip="Go back" />An option to use custom content instead of text.
<x-kbd> <x-icon name="arrow-up" class="h-4 w-4" /></x-kbd>