Kbd

Kbd renders a styled keyboard key indicator. It wraps content in a semantic <kbd> element with Bootstrap-compatible styling, making it easy to document keyboard shortcuts and hotkeys in your UI.

Bootstrap Reference

Bootstrap 5 Typography — Keyboard Inputs

---

Quick Start

from faststrap import Kbd

Kbd("Ctrl")
Kbd("S", variant="dark")
Kbd("Ctrl", "S")

---

Visual Examples & Use Cases

1. Single Keys

Live Preview

Ctrl S Enter

Kbd("Ctrl")
Kbd("S", variant="dark")
Kbd("Enter")

2. Key Combinations

Live Preview

Ctrl C ⌘ K Ctrl Shift P

# Pass multiple children to render a key combo
Kbd("Ctrl", "C")
Kbd("⌘", "K")
Kbd("Ctrl", "Shift", "P")

3. Size Variants

Live Preview

Small Medium Large

Kbd("Small", size="sm")
Kbd("Medium", size="md")
Kbd("Large", size="lg")

---

Practical Functionality

1. Inside a Button Tooltip

from faststrap import Button, Tooltip

Button(
    "Save",
    variant="primary",
    data_bs_toggle="tooltip",
    data_bs_title="Save document",
    data_bs_placement="bottom",
)

# In your template:
# <kbd>Ctrl</kbd> + <kbd>S</kbd> to save

2. Inside an Alert

Alert(
    "Press ",
    Kbd("Ctrl", "K"),
    " to open the command palette.",
    variant="info",
)

3. In Documentation

from faststrap import Stack

Stack(
    "Keyboard Shortcuts",
    Kbd("Ctrl", "C") + " — Copy",
    Kbd("Ctrl", "V") + " — Paste",
    Kbd("Ctrl", "Z") + " — Undo",
    gap=1,
)

---

Parameter Reference

Parameter	Type	Default	Description
*children	Any	required	Key label content (e.g. "Ctrl", "⌘", "F1").
size	"sm" \| "md" \| "lg"	"md"	Font size variant.
variant	"light" \| "dark"	"light"	Color variant: light for light backgrounds, dark for dark backgrounds.
**kwargs	Any	{}	Additional HTML attributes (cls, id, etc.).

---

Accessibility

• Renders a semantic <kbd> element.
• Screen readers will announce the content as keyboard input.

---

API Reference

faststrap.components.display.kbd.Kbd(*children, size='md', variant='light', **kwargs)

Render a styled keyboard key indicator.

Wraps content in a semantic element with Bootstrap-compatible styling. Useful for documenting keyboard shortcuts and hotkeys.

Parameters:

Name	Type	Description	Default
*children	Any	Key label content (e.g. "Ctrl", "⌘", "F1")	()
size	Literal['sm', 'md', 'lg']	Font size variant (sm, md, lg)	'md'
variant	Literal['light', 'dark']	Color variant (light for light backgrounds, dark for dark)	'light'
**kwargs	Any	Additional HTML attributes (cls, id, hx-, data-, etc.)	{}

Returns:

Type	Description
Kbd	FastHTML Kbd element with styled keyboard key appearance

Source code in src/faststrap/components/display/kbd.py

@register(category="display")
@stable
def Kbd(
    *children: Any,
    size: Literal["sm", "md", "lg"] = "md",
    variant: Literal["light", "dark"] = "light",
    **kwargs: Any,
) -> HtmlKbd:
    """Render a styled keyboard key indicator.

    Wraps content in a semantic <kbd> element with Bootstrap-compatible styling.
    Useful for documenting keyboard shortcuts and hotkeys.

    Args:
        *children: Key label content (e.g. "Ctrl", "⌘", "F1")
        size: Font size variant (sm, md, lg)
        variant: Color variant (light for light backgrounds, dark for dark)
        **kwargs: Additional HTML attributes (cls, id, hx-*, data-*, etc.)

    Returns:
        FastHTML Kbd element with styled keyboard key appearance
    """
    user_cls = kwargs.pop("cls", "")

    classes = ["kbd"]

    # Size variants
    size_map = {
        "sm": "kbd-sm",
        "md": "",
        "lg": "kbd-lg",
    }
    size_class = size_map.get(size, "")
    if size_class:
        classes.append(size_class)

    # Color variant
    if variant == "dark":
        classes.append("bg-dark")
        classes.append("text-light")
    else:
        classes.append("bg-light")
        classes.append("text-dark")
        classes.append("border")
        classes.append("border-secondary-subtle")

    attrs: dict[str, Any] = {
        "cls": merge_classes(" ".join(classes), user_cls),
    }
    attrs.update(convert_attrs(kwargs))

    return HtmlKbd(*children, **attrs)