Kbd

Used to display textual user input from keyboard.

⌘⇧⌥⌃Ctrl+B

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

#[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::kbd::*;

#[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::{Button, Kbd};

#[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>
    }
}

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.

Implements global attributes.