Kbd

Used to display textual user input from keyboard.

⌘⇧⌥⌃Ctrl+B

use leptos::prelude::*;
use singlestage::*;

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

Group

Use the KbdGroup component to group keyboard keys together.

Use Ctrl + BCtrl + K to open the command palette

use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn KbdGroupExample() -> impl IntoView {
    view! {
        <div class="flex flex-col items-center gap-4">
            <p class="text-(--muted-foreground) text-sm">
                "Use " <KbdGroup>
                    <Kbd>"Ctrl + B"</Kbd>
                    <Kbd>"Ctrl + K"</Kbd>
                </KbdGroup> " to open the command palette"
            </p>
        </div>
    }
}

Button

Use the Kbd component inside a Button component to display a keyboard key inside a button.

use leptos::prelude::*;
use singlestage::*;

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

Tooltip

You can use the Kbd component inside a Tooltip component to display a tooltip with a keyboard key.

use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn KbdTooltipExample() -> impl IntoView {
    view! {
        <div class="flex flex-wrap gap-4">
            <ButtonGroup>
                <Tooltip>
                    <TooltipTrigger>
                        <Button variant="outline">"Save"</Button>
                    </TooltipTrigger>
                    <TooltipContent>"Save Changes "<Kbd>"S"</Kbd></TooltipContent>
                </Tooltip>
                <Tooltip>
                    <TooltipTrigger>
                        <Button variant="outline">"Print"</Button>
                    </TooltipTrigger>
                    <TooltipContent>
                        "Print Document "<KbdGroup>
                            <Kbd>"Ctrl"</Kbd>
                            <Kbd>"P"</Kbd>
                        </KbdGroup>
                    </TooltipContent>
                </Tooltip>
            </ButtonGroup>
        </div>
    }
}

Input Group

You can use the Kbd component inside a InputGroupAddon component to display a keyboard key inside an input group.

⌘K

use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn KbdInputGroupExample() -> impl IntoView {
    view! {
        <div class="flex w-full max-w-xs flex-col gap-6">
            <InputGroup>
                <Input placeholder="Search..." />
                <InputGroupAddon>{icon!(icondata::LuSearch)}</InputGroupAddon>
                <InputGroupAddon align="inline-end">
                    <Kbd>"⌘"</Kbd>
                    <Kbd>"K"</Kbd>
                </InputGroupAddon>
            </InputGroup>
        </div>
    }
}

Anatomy

Import all parts and piece them together.

use leptos::prelude::*;
use singlestage::kbd::*;

#[component]
pub fn KbdAnatomy() -> impl IntoView {
    view! {
        <KbdGroup>
            <Kbd />
        </KbdGroup>
    }
}

API Reference

Kbd

Contains a single styled input indication.

Implements global attributes.

KbdGroup

Contains a group of styled input indicators.