HomeGetting StartedColor SystemTypographySpacingIconographyLayoutInstallationUsageAngularBlazorReactSvelteVueThemingTypographyCustomizationCSS-Only ComponentsFormsIconsIllustrationsAccessibilityGlobal ConfigurationTailwind CSSSass LibraryForge MCP ServerDropdown OptionsFocus Indicator ClippingAll componentsButtonButton AreaChipFloating Action ButtonIcon ButtonSplit ButtonAutocompleteButton ToggleCalendarCheckboxChip FieldColor PickerDate PickerDate Range PickerFile PickerLabelRadioSelectSliderSwitchText FieldTime PickerApp BarApp LauncherDrawerMenuPaginatorSkip LinkStepperTabsView SwitcherAccordionApp LayoutCardDividerExpansion PanelScaffoldSplit ViewStackStructured CardToolbarBadgeBannerBusy IndicatorCircular ProgressDialogInline MessageLinear ProgressPage StateSkeletonToastTooltipAvatarIconKbdKeyLabel ValueListMeterSecretTableTimelineTimestampTreeKeyboard ShortcutPopoverIntroductionColorTypographySpacingShapeBorderElevationLayeringAnimationUsageIcon LibraryBlocksRoadmapChangelogBlog

Kbd

Kbd displays a keyboard key combination, such as a shortcut in documentation or a hint within the UI.

Overview

Kbd shows the keys that make up a keyboard shortcut as individual, key-shaped glyphs. It lets users recognize a shortcut at a glance, whether it’s described in help text or documentation, or surfaced as a hint next to a menu item or button.

Kbd is typically paired with menu items, buttons, tooltips, and help content that describe an action alongside the shortcut that triggers it.

Usage

forge-kbd renders the modifier keys you turn on with ctrl, alt, shift, meta, and mod, followed by the keys listed in keys. It only displays a shortcut; use keyboard shortcut to actually listen for one. Use mod for the primary modifier of the current platform, which shows ⌘ on Apple platforms and Ctrl elsewhere, and dense, muted, and theme to adapt the appearance to its surroundings.

Rules

Do
Use mod instead of hard-coding ctrl or meta so the shortcut matches the user's platform.Place a kbd next to the label of the action it triggers.Use dense when a kbd sits inside compact UI such as a menu item.Use muted when the shortcut is secondary information.
Don't
Don't use kbd to make buttons or other controls look like keys.Don't show a shortcut that isn't wired up to anything.Don't rely on the key glyphs alone to describe an action; always include a text label.

Basic usage

Set the modifier properties you need and list the remaining keys in keys.

A kbd showing the Shift and K keys.

Key strings

keys takes an array of strings. As an attribute it takes a space-separated list. Some keys are shown as glyphs or friendlier names: ArrowUp, ArrowDown, ArrowLeft, and ArrowRight show arrows, Escape shows Esc, and Enter shows Return on Apple platforms. Every other key is shown as provided, converted to title case.

A kbd showing arrow keys and a named key.

Modifier keys

Modifiers are shown with platform-appropriate glyphs, in the order Control, Alt, Shift, Meta, then Mod, followed by keys.

<forge-kbd mod keys="S"></forge-kbd>

Kbd with each modifier key turned on.

Dense

Set dense to render smaller keys that fit within compact UI.

A dense kbd.

Muted

Set muted to render the keys without outlines when the shortcut is secondary information.

A muted kbd.

Theme

Set theme to one of primary, secondary, tertiary, info, success, warning, or error to color the keys.

Kbd in each theme.

Displays a keyboard key combination made up of modifier and alphanumeric keys.

import "@tylertech/forge/kbd";
Properties
PropertyAttributeTypeDefaultDescription
keyskeysstring[][]A space-separated list of alphanumeric keys to display.
altaltbooleanfalseWhether to display the Alt key (Option/⌥ on Apple keyboards or Alt on Windows keyboards).
ctrlctrlbooleanfalseWhether to display the Control key (Control/⌃ on Apple keyboards or Ctrl on Windows keyboards).
metametabooleanfalseWhether to display the Meta key (Command/⌘ on Apple keyboards or ⊞ on Windows keyboards).
modmodbooleanfalseWhether to display the platform-specific mod key (Command/⌘ on Apple keyboards or Ctrl on Windows keyboards).
shiftshiftbooleanfalseWhether to display the Shift key.
densedensebooleanfalseWhether to display the keys in compact style.
themethemestring''The theme to apply to the keyboard keys.
mutedmutedbooleanfalseRenders the keys without outlines.
CSS Parts
NameDescription
::part(root)The root container element.
::part(key)Each individual rendered `<kbd>` key element.
CSS Custom Properties
NameDescription
--forge-kbd-backgroundThe background color of the keyboard keys.
--forge-kbd-colorThe text color of the keyboard keys.
--forge-kbd-shapeThe border radius of the keyboard keys.
--forge-kbd-block-sizeThe block size of the keyboard keys. The inline size is automatically calculated based on the block size.
--forge-kbd-padding-inlineThe inline padding of the keyboard keys.
--forge-kbd-border-widthThe border width of the keyboard keys.
--forge-kbd-border-styleThe border style of the keyboard keys.
--forge-kbd-border-colorThe border color of the keyboard keys.
--forge-kbd-gapThe spacing between rendered keys.

Screen reader behavior

forge-kbd renders native <kbd> elements, which assistive technology recognizes as keyboard input. Each key is rendered in its own <kbd> inside a wrapping <kbd>, so a screen reader can read the combination in order. When only one key is shown, the wrapper gets role="presentation" so the key isn’t announced twice.

Labeling

forge-kbd isn’t focusable and has no accessible name of its own. Always describe the action in nearby text, and don’t rely on the glyphs alone.

If the shortcut is actually bound to an element, expose it with aria-keyshortcuts on that element, since forge-kbd is only a visual representation. Use keyboard shortcut to wire up the behavior itself.

Platform glyphs

Modifier keys and some named keys are shown with different glyphs on Apple platforms (for example ⌘ instead of Ctrl). Screen readers may read symbols such as ⌘ and ⇧ differently than the key names, so describe the shortcut in text wherever it matters.

Loading Forge chat…