Kbd

Fission

Product

▾

Setup

›

›

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() }.into(),
        Kbd { text: "C".into() }.into(),
    ],
}
.into();

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

Field table

Field	Type	Meaning	Notes / default behavior
text	String	Key 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.

Production checklist

For Kbd, review the fields that change behavior before treating the widget as finished: text. The goal is to make the product rule visible in state and actions, not hidden inside ad-hoc construction code.

•

If this widget appears inside an interactive flow, keep the surrounding action binding in the parent component and test that the flow still has one clear reducer path.

•

Check the semantics tree for the user-facing label or role that makes this widget understandable without relying only on pixels.

•

Add at least one component or harness test that confirms the visible text, semantic role, action dispatch, and layout constraint that matter for this widget in context.

If a screen starts repeating the same Kbd setup, extract a named component around this widget. That keeps the reference API small while making product code easier to read and safer for generated code to copy.

Code, Text, Link, and Alert.