Kbd

Rust/UI Icons - ChevronLeftRust/UI Icons - ChevronRight

Display keyboard shortcuts and key combinations with proper styling.

utils
  • Rust/UI Icons - CopyCopy Demo
⌘⇧⌥⌃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

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

Examples

Kbd Button

Show keyboard shortcuts in buttons.

  • Rust/UI Icons - CopyCopy Demo
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

Display keyboard shortcuts in search inputs.

  • Rust/UI Icons - CopyCopy Demo
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>
    }
}
Rust/UI Icons - ChevronLeftItemLabelRust/UI Icons - ChevronRight