Getting StartedComponentsDesign TokensThemingTheme SynthesizerFrameworksAccessibilityUtilitiesServer RenderingBrowser SupportContributingChangelogApp ShellAspect GridAuth ShellCenterContainerDashboard GridFloat BarInsetMasonryPage HeaderPage LayoutResizableResponsive SwitcherSectionSettings LayoutSplit PaneStatus BarStickyToolbarAnchor NavBottom NavBreadcrumbBreadcrumb MenuCommand BarDrawerFooterLinkMenubarNavigation MenuPage IndicatorPaginationRailScroll IndicatorScroll SpyScroll To TopSidebarSkip LinkStepper NavTabsTop BarTree ViewAccordionAspect RatioAvatarAvatar GroupCardCarouselCollapsibleColor SwatchCTA BannerDividerEmpty StateFeature CardIconImageImage CompareImage HotspotsInfinite ScrollLightboxMarqueeQR CodeScroll AreaSkeletonSpinnerStackVideoVirtual ListActivity HeatmapAnimated NumberBadgeBar ListChartClockComparisonCountdown TimerData GridDescription ListDiffGaugeJSON TreeKanbanLevel MeterListMeterSparklineStatStepperTagTimelineUptimeValue CardWaveformBlockquoteCode BlockCode GroupGradient TextHighlightKbdKeyboard MapMarkdownNumber FormatProseTerminalTextTime AgoTruncateTypewriterButtonButton GroupCalendarCheckboxChipColor PickerComboboxCopy ButtonDate PickerDate Range PickerField ListFieldsetFile UploadFormHotkeyIcon ButtonImage CropperInline EditInputInput GroupKnobLabelMasked InputMulti SelectNumber InputPassword InputPin InputRadio GroupRange SliderRatingSearchSegmented ControlSelectSignature PadSliderSortable ListSwitch GroupTag InputTextareaTheme ToggleTime PickerToggleTransfer ListTree SelectAlertAnnouncementBannerCommand PaletteConfirmConnection StatusContext MenuConversationDialogDropdown MenuHover CardLoading OverlayNotification PanelPopoverProgressSheetToastTooltip
ARC UIARC Radiant Components
v4.9DocsComponentsTokensSynthesizer
Getting StartedFrameworksServer RenderingDesign TokensThemingTheme SynthesizerTypographyUtilitiesAll ComponentsAccessibilityBrowser SupportChangelogContributingStatsApp ShellAspect GridAuth ShellCenterContainerDashboard GridFloat BarInsetMasonryPage HeaderPage LayoutResizableResponsive SwitcherSectionSettings LayoutSplit PaneStatus BarStickyToolbarAnchor NavBottom NavBreadcrumbBreadcrumb MenuCommand BarDrawerFooterLinkMenubarNavigation MenuPage IndicatorPaginationRailScroll IndicatorScroll SpyScroll To TopSidebarSkip LinkStepper NavTabsTop BarTree ViewAccordionAspect RatioAvatarAvatar GroupCardCarouselCollapsibleColor SwatchCTA BannerDividerEmpty StateFeature CardIconImageImage CompareImage HotspotsInfinite ScrollLightboxMarqueeQR CodeScroll AreaSkeletonSpinnerStackVideoVirtual ListActivity HeatmapAnimated NumberBadgeBar ListChartClockComparisonCountdown TimerData GridDescription ListDiffGaugeJSON TreeKanbanLevel MeterListMeterSparklineStatStepperTagTimelineUptimeValue CardWaveformBlockquoteCode BlockCode GroupGradient TextHighlightKbdKeyboard MapMarkdownNumber FormatProseTerminalTextTime AgoTruncateTypewriterButtonButton GroupCalendarCheckboxChipColor PickerComboboxCopy ButtonDate PickerDate Range PickerField ListFieldsetFile UploadFormHotkeyIcon ButtonImage CropperInline EditInputInput GroupKnobLabelMasked InputMulti SelectNumber InputPassword InputPin InputRadio GroupRange SliderRatingSearchSegmented ControlSelectSignature PadSliderSortable ListSwitch GroupTag InputTextareaTheme ToggleTime PickerToggleTransfer ListTree SelectAlertAnnouncementBannerCommand PaletteConfirmConnection StatusContext MenuConversationDialogDropdown MenuHover CardLoading OverlayNotification PanelPopoverProgressSheetToastTooltip

Kbd

Keyboard key indicator styled like a physical key.

ComponentsKbd
typographystatic
<arc-kbd>

Overview

Kbd renders a keyboard key indicator styled to resemble a physical keycap. It uses a raised background, a 1px border with a thicker 2px bottom border, and monospace typography to create the classic "keycap" appearance. The component is inline-level, so it sits within running text and suits documenting keyboard shortcuts, hotkeys, and key combinations. The component accepts any content via its default slot: single keys like "Ctrl", modifier combinations, or special characters. The styling is minimal: 11px monospace text (`--font-mono`), `--bg-elevated` background, and `--border-default` borders. The thicker bottom border creates the "raised key" illusion. The `user-select: none` rule prevents accidental selection when users are reading shortcut documentation. Kbd renders a semantic `<kbd>` HTML element inside the shadow DOM, which is the correct element for representing user keyboard input. This ensures screen readers and other assistive technologies interpret the content correctly. The CSS part (`kbd`) is exposed for style overrides when you need to adjust colors for different contexts.

Guidelines

When to use

  • Use for documenting keyboard shortcuts in help text and documentation pages
  • Combine multiple Kbd elements with "+" or separator text for key combinations
  • Use standard key names: Ctrl, Shift, Alt, Cmd, Enter, Esc, Tab
  • Place inline within sentences: "Press Ctrl + C to copy"
  • Use it for single keys or modifier labels, not for typing entire words

When not to use

  • Do not use Kbd for non-keyboard input like mouse actions or touch gestures
  • Do not put long strings inside a Kbd. It is designed for short key labels (1-5 characters)
  • Do not style Kbd to look like a button. It is a documentation element, not an interactive one
  • Do not nest Kbd elements inside each other
  • Do not use Kbd for code snippets. Use the CodeBlock component for code

Features

  • Semantic <kbd> element for correct assistive technology interpretation
  • Physical keycap appearance with a raised background and thicker bottom border
  • Monospace typography (`--font-mono`) at 11px for consistent key label rendering
  • Inline display for natural flow within paragraph text
  • user-select: none prevents accidental selection during reading
  • CSS part (kbd) for external style customization

Preview

Press Ctrl + C to copy, Ctrl + V to paste, or Esc to cancel.

Usage

Press <arc-kbd>Ctrl</arc-kbd> + <arc-kbd>C</arc-kbd> to copy.

See Also

ARC UI

Components that glow.One Lit source, seven native targets.

Docs

Project

Arclight

© 2026 Arclight Digital, LLC. All rights reserved.

Documentation generated with AI assistance and reviewed by humans. Found an issue? Open a GitHub issue.

Privacy Policy