basecoat/docs/src/components/kbd.md

templateEngineOverride, layout, title, description, toc

templateEngineOverride	layout	title	description	toc
njk	layouts/page.njk	Kbd	Used to display textual user input from keyboard.	label id Usage usage label id children Examples examples label id Group example-group label id Button example-button label id Input Group example-input-group label id RTL example-rtl

{% from "macros/code_preview.njk" import code_preview %} {% from "macros/code_block.njk" import code_block %}

{% set code_html %}

⌘ ⇧ ⌥ ⌃ Ctrl + B

{% endset %}

{{ code_preview("kbd", code_html | prettyHtml) }}

Usage

Use the <kbd> element with the kbd class. Use kbd-group to group multiple keys.

{% set code_simple %} ⌘K {% endset %}

{{ code_block(code_simple | prettyHtml, "html") }}

Examples

Group

{% set group_html %}

Use Ctrl + B Ctrl + K to open the command palette

{% endset %}

{{ code_preview("kbd-group", group_html | prettyHtml) }}

Button

{% set button_html %}

Accept ⏎ Cancel Esc

{% endset %}

{{ code_preview("kbd-button", button_html | prettyHtml) }}

Input Group

{% set input_group_html %}

{% lucide "search", { "class": "absolute start-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" } %} /

{% endset %}

{{ code_preview("kbd-input-group", input_group_html | prettyHtml) }}

RTL

Keyboard labels are direction-neutral. Surrounding spacing should use logical utilities when position matters.

{% set rtl_html %}

استخدم Ctrl K لفتح البحث

{% endset %}

{{ code_preview("kbd-rtl", rtl_html | prettyHtml) }}