Skip to main content

Kbd

Kbd is the small keycap-style label for keyboard instructions.

Use it when a product or document needs to teach a shortcut such as Ctrl+C, Cmd+K, or g then i. A dedicated keycap style reads more clearly than plain prose when shortcuts matter.

Example​

use fission::prelude::*;

let chord = HStack {
    spacing: Some(6.0),
    children: vec![
        Kbd { text: "Ctrl".into() }.build(ctx, view),
        Kbd { text: "C".into() }.build(ctx, view),
    ],
}
.into_node();

Building each key separately usually reads better than putting the whole chord in one box.

Field table​

FieldTypeMeaningNotes / default behavior
textStringKey label shown inside the keycap.Required.

user experience intent​

Kbd is purely visual guidance. It does not listen for key events and does not prove that the shortcut is actually wired elsewhere in your app. Make sure the documented shortcut matches the real behavior.

Specific advice​

For multi-step shortcuts, show each keycap separately and add plain text between them when needed, such as then. That is easier to scan than a long combined string.

Code, Text, Link, and Alert.