GitHub New

Kbd

Previous Next

Used to display textual user input from keyboard.

⌘ ⇧ ⌥ ⌃ Ctrl + B
<div class="flex flex-col items-center gap-4">
    <KbdGroup>
        <Kbd>&#8984;</Kbd>
        <Kbd>&#8679;</Kbd>
        <Kbd>&#8997;</Kbd>
        <Kbd>&#8963;</Kbd>
    </KbdGroup>
    <KbdGroup>
        <Kbd>Ctrl</Kbd>
        <span>+</span>
        <Kbd>B</Kbd>
    </KbdGroup>
</div>

Installation

blazor-shadcn add kbd

Usage

@using ShadcnBlazor.Components.UI
<Kbd>Ctrl</Kbd>

Examples

Group

Use the KbdGroup component to group keyboard keys together.

Use Ctrl + B Ctrl + K to open the command palette 

<p class="text-muted-foreground text-sm">
    Use
    <KbdGroup>
        <Kbd>Ctrl + B</Kbd>
        <Kbd>Ctrl + K</Kbd>
    </KbdGroup>
    to open the command palette
</p>

Button

Use the Kbd component inside a button.

<div class="flex flex-wrap items-center gap-4">
     <Button Variant="@Button.ButtonVariant.Outline" Size="@Button.ButtonSize.Sm" Class="pr-2">
     Accept <Kbd>&#9166;</Kbd>
 </Button>
</div>

TooltipComing soon

Coming Soon

Input GroupComing soon

Coming Soon

API Reference

Kbd

Use the Kbd component to display a keyboard key.

Prop Type Default
Classstring?null

KbdGroup

Use the KbdGroup component to group Kbd components together.

Prop Type Default
Classstring?null