Kbd

A keyboard key or shortcut.

2 files

<div class="flex flex-col items-center gap-4">
  <pb-ui.kbd-group><pb-ui.kbd>⌘</pb-ui.kbd><pb-ui.kbd>⇧</pb-ui.kbd><pb-ui.kbd>⌥</pb-ui.kbd><pb-ui.kbd>⌃</pb-ui.kbd></pb-ui.kbd-group>
  <pb-ui.kbd-group><pb-ui.kbd>Ctrl</pb-ui.kbd><span class="text-sm">+</span><pb-ui.kbd>B</pb-ui.kbd></pb-ui.kbd-group>
</div>

Installation

pyblade-ui add kbd

Copy these files into your project

components/ui/kbd.html

<kbd data-slot="kbd" {{ attributes.cn("pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm bg-muted px-1 font-sans text-xs font-medium text-muted-foreground select-none [&_svg:not([class*='size-'])]:size-3") }}>{{ slot }}</kbd>

components/ui/kbd_group.html

<kbd data-slot="kbd-group" {{ attributes.cn("inline-flex items-center gap-1") }}>{{ slot }}</kbd>

Update the path to fit your project
The components folder is the one set in pyblade.toml.

Usage

The tags <pb-ui.kbd> <pb-ui.kbd-group> are available in all your templates.

<pb-ui.kbd-group><pb-ui.kbd>Ctrl</pb-ui.kbd><pb-ui.kbd>K</pb-ui.kbd></pb-ui.kbd-group>

Examples

In text

‹ Empty Spinner ›