Kbd

Rust/UI Icons - ChevronLeftRust/UI Icons - ChevronRight

Display keyboard shortcuts and key combinations with proper styling.

utils
⌘⇧⌥⌃Ctrl+B
use leptos::prelude::*;

use crate::components::ui::kbd::{Kbd, KbdGroup};

#[component]
pub fn DemoKbd() -> impl IntoView {
    view! {
        <div class="flex flex-col gap-4 items-center">
            <KbdGroup>
                <Kbd>"⌘"</Kbd>
                <Kbd>"⇧"</Kbd>
                <Kbd>"⌥"</Kbd>
                <Kbd>"⌃"</Kbd>
            </KbdGroup>
            <KbdGroup>
                <Kbd>"Ctrl"</Kbd>
                <span>"+"</span>
                <Kbd>"B"</Kbd>
            </KbdGroup>
        </div>
    }
}

Installation

You can run either of the following commands:

# cargo install ui-cli --force
ui add demo_kbd
ui add kbd

Update the imports to match your project setup.

Copy and paste the following code into your project:

components/ui/kbd.rs

use leptos::prelude::*;
use leptos_ui::clx;

mod components {
    use super::*;
    clx! {Kbd, kbd, "bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none [&_svg:not([class*='size-'])]:size-3 [[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10"}
    clx! {KbdGroup, kbd, "inline-flex items-center gap-1"}
}

pub use components::*;

Update the imports to match your project setup.

Usage

You can use the Kbd component in combination with the Button and InputGroup components.

use crate::components::ui::kbd::{Kbd, KbdGroup};
<Kbd>"⌘"</Kbd>

Examples

Kbd Button

Display keyboard shortcuts within button components for better command discoverability. This example demonstrates how to combine Kbd and Button components in Leptos to create intuitive interfaces that teach users keyboard navigation in Rust applications.

use leptos::prelude::*;

use crate::components::ui::button::{Button, ButtonSize, ButtonVariant};
use crate::components::ui::kbd::Kbd;

#[component]
pub fn DemoKbdButton() -> impl IntoView {
    view! {
        <div class="flex flex-wrap gap-4 items-center">
            <Button variant=ButtonVariant::Outline size=ButtonSize::Sm class="pr-2">
                "Accept "
                <Kbd>"⏎"</Kbd>
            </Button>
            <Button variant=ButtonVariant::Outline size=ButtonSize::Sm class="pr-2">
                "Cancel "
                <Kbd>"Esc"</Kbd>
            </Button>
        </div>
    }
}

With Input Group

Integrate keyboard shortcut indicators with input fields for enhanced search functionality. This example shows how to use Kbd with InputGroup in Leptos to display search hotkeys and improve user productivity in Rust UI components.

Rust/UI Icons - Search
⌘K
use icons::Search;
use leptos::prelude::*;

use crate::components::ui::input_group::{InputGroup, InputGroupAddon, InputGroupAddonAlign, InputGroupInput};
use crate::components::ui::kbd::Kbd;

#[component]
pub fn DemoKbdInputGroup() -> impl IntoView {
    view! {
        <div class="flex flex-col gap-6 w-full max-w-xs">
            <InputGroup>
                <InputGroupInput attr:placeholder="Search..." />
                <InputGroupAddon>
                    <Search />
                </InputGroupAddon>
                <InputGroupAddon align=InputGroupAddonAlign::InlineEnd>
                    <Kbd>"⌘"</Kbd>
                    <Kbd>"K"</Kbd>
                </InputGroupAddon>
            </InputGroup>
        </div>
    }
}

Get notified when new stuff drops.

Rust/UI Icons - Send
Rust/UI Icons - ChevronLeftItemLabelRust/UI Icons - ChevronRight