Skip to main content

ui_storybook/components/primitives/
kbd.rs

1//! `Kbd` — monospaced keyboard-shortcut chip (M-UI.1 / AUT-121).
2//!
3//! Wraps each key glyph in a `<kbd>` element. The component takes a
4//! `keys` prop — a slice of `&'static str` — so the caller composes
5//! `["⌘", "⇧", "R"]` and the renderer emits `<kbd>⌘</kbd><kbd>⇧</kbd>
6//! <kbd>R</kbd>` with a thin separator glyph between each key.
7
8use leptos::prelude::*;
9
10#[component]
11pub fn Kbd(
12    /// Keys to render as separate `<kbd>` chips, in display order.
13    /// Pass `&["⌘", "R"]` for ⌘R.
14    keys: Vec<&'static str>,
15    #[prop(optional, into)] extra_class: String,
16) -> impl IntoView {
17    let class = format!(
18        "kbd-row{}{}",
19        if extra_class.is_empty() { "" } else { " " },
20        extra_class,
21    );
22    view! {
23        <span class=class>
24            {keys.into_iter()
25                .map(|k| view! { <kbd class="kbd-key">{k}</kbd> })
26                .collect_view()}
27        </span>
28    }
29}