Kbd

Anatomy

Keyboard shortcut display component for help cards, tooltips, and command palettes.

maud_ui::primitives::kbd

Generated from public Rust fields. Defaults are evaluated from the implementation.

Prop	Type	Default	Description
`keys`	`Vec<String>`	`[]`	Keys to display (e.g., ["Ctrl", "S"] or ["⌘", "K"])
`variant`	`Variant`	`Default`	Treatment. See `Variant`.

Keyboard shortcuts

Save⌘+S

Undo⌘+Z

Redo⇧+⌘+Z

Command palette⌘+K

Toggle comment⌘+/

Inline code chipvehicle_state

Usage and composition

use maud_ui::primitives::kbd::{self, Props};

use maud::html;
use maud_ui::primitives::kbd;

html! {
    (kbd::render(kbd::Props {
        keys: vec!["⌘".to_string(), "K".to_string()],
    }))
}

Each key renders as a <kbd> element.
Keys are separated by + (span.mui-kbd-separator) in the keycap variant.
The keycap group wraps in span.mui-kbd-container for flexbox layout (a span, so chips can live inside paragraphs without the browser closing the <p>).
The Code variant renders the chip(s) bare — inline content, no wrapper — so a chip inside a sentence does not perturb the line's height.

Minimal kbd component for keyboard notation. Typically embedded in help dialogs or command palette documentation.

Uses semantic <kbd> element for keyboard input notation.
Screen readers will announce as "Ctrl plus S" etc. (based on platform-specific SR rendering).
No ARIA labels needed; semantic markup is sufficient.