Getting StartedComponentsDesign TokensThemingTheme SynthesizerFrameworksAccessibilityUtilitiesServer RenderingBrowser SupportContributingChangelog App ShellAspect GridAuth ShellCenterClusterContainerDashboard GridDockFloat BarInsetMasonryPage HeaderPage LayoutResizableResponsive SwitcherSectionSettings LayoutSplit PaneStatus BarStickyToolbar Anchor NavBottom NavBreadcrumbBreadcrumb MenuCommand BarDrawerFooterLinkMenubarNavigation MenuPage IndicatorPaginationRailScroll IndicatorScroll SpyScroll To TopSidebarSkip LinkSpeed DialStepper NavTabsTop BarTree View AccordionAspect RatioAvatarAvatar GroupCalloutCardCarouselCollapsibleColor SwatchCTA BannerDividerEmpty StateFeature CardIconImageImage CompareImage HotspotsInfinite ScrollLightboxMarqueeQR CodeScroll AreaSeparatorSkeletonSpinnerStackVideoVirtual List Activity HeatmapAnimated NumberBadgeChartClockComparisonCountdown TimerData GridData TableDescription ListDiffEvent CalendarGaugeJSON TreeKanbanKey ValueLevel MeterListMeterSparklineStatStepperTableTagTimelineUptimeValue CardWaveform BlockquoteCode BlockGradient TextHighlightKbdKeyboard MapMarkdownNumber FormatProseTerminalTextTime AgoTruncateTypewriter ButtonButton GroupCalendarCheckboxChipColor PickerComboboxCopy ButtonDate PickerDate Range PickerFieldsetFile UploadFormHotkeyIcon ButtonImage CropperInline EditInputInput GroupKnobLabelMasked InputMulti SelectNumber InputOTP InputPassword InputPin InputRadio GroupRange SliderRatingSearchSegmented ControlSelectSignature PadSliderSortable ListSwitch GroupTag InputTextareaTheme ToggleTime PickerToggleTransfer ListTree Select AlertAnnouncementBannerCommand PaletteConfirmConnection StatusContext MenuConversationDialogDropdown MenuGuided TourHover CardInline MessageLoading OverlayModalNotification PanelPopoverProgressProgress ToastSheetSnackbarSpotlightToastTooltip
ARC UI ARC Radiant Components
v3.2 Docs Components Tokens Synthesizer
Getting StartedFrameworksServer Rendering Design TokensThemingTheme SynthesizerTypographyUtilities All ComponentsAccessibilityBrowser SupportChangelogContributingStats App ShellAspect GridAuth ShellCenterClusterContainerDashboard GridDockFloat BarInsetMasonryPage HeaderPage LayoutResizableResponsive SwitcherSectionSettings LayoutSplit PaneStatus BarStickyToolbar Anchor NavBottom NavBreadcrumbBreadcrumb MenuCommand BarDrawerFooterLinkMenubarNavigation MenuPage IndicatorPaginationRailScroll IndicatorScroll SpyScroll To TopSidebarSkip LinkSpeed DialStepper NavTabsTop BarTree View AccordionAspect RatioAvatarAvatar GroupCalloutCardCarouselCollapsibleColor SwatchCTA BannerDividerEmpty StateFeature CardIconImageImage CompareImage HotspotsInfinite ScrollLightboxMarqueeQR CodeScroll AreaSeparatorSkeletonSpinnerStackVideoVirtual List Activity HeatmapAnimated NumberBadgeChartClockComparisonCountdown TimerData GridData TableDescription ListDiffEvent CalendarGaugeJSON TreeKanbanKey ValueLevel MeterListMeterSparklineStatStepperTableTagTimelineUptimeValue CardWaveform BlockquoteCode BlockGradient TextHighlightKbdKeyboard MapMarkdownNumber FormatProseTerminalTextTime AgoTruncateTypewriter ButtonButton GroupCalendarCheckboxChipColor PickerComboboxCopy ButtonDate PickerDate Range PickerFieldsetFile UploadFormHotkeyIcon ButtonImage CropperInline EditInputInput GroupKnobLabelMasked InputMulti SelectNumber InputOTP InputPassword InputPin InputRadio GroupRange SliderRatingSearchSegmented ControlSelectSignature PadSliderSortable ListSwitch GroupTag InputTextareaTheme ToggleTime PickerToggleTransfer ListTree Select AlertAnnouncementBannerCommand PaletteConfirmConnection StatusContext MenuConversationDialogDropdown MenuGuided TourHover CardInline MessageLoading OverlayModalNotification PanelPopoverProgressProgress ToastSheetSnackbarSpotlightToastTooltip

Kbd

Keyboard key indicator styled like a physical key.

Components Kbd
typography static
<arc-kbd>

Overview

Kbd renders a keyboard key indicator styled to resemble a physical keycap. It uses an elevated 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 naturally within running text, making it ideal for documenting keyboard shortcuts, hotkeys, and key combinations. The component accepts any content via its default slot — single keys like "Ctrl", modifier combinations, or even special characters. The styling is intentionally 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 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 elevated 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.
 
import { Kbd } from '@arclux/arc-ui-react';

Press <Kbd>Ctrl</Kbd> + <Kbd>C</Kbd> to copy.
 
<script setup>
import { Kbd } from '@arclux/arc-ui-vue';
</script>

<template>
  Press <Kbd>Ctrl</Kbd> + <Kbd>C</Kbd> to copy.
</template>
 
<script>
  import { Kbd } from '@arclux/arc-ui-svelte';
</script>

Press <Kbd>Ctrl</Kbd> + <Kbd>C</Kbd> to copy.
 
import { Component } from '@angular/core';
import { Kbd } from '@arclux/arc-ui-angular';

@Component({
  imports: [Kbd],
  template: `
    Press <arc-kbd>Ctrl</arc-kbd> + <arc-kbd>C</arc-kbd> to copy.
  `,
})
export class MyComponent {}
 
import { Kbd } from '@arclux/arc-ui-solid';

Press <Kbd>Ctrl</Kbd> + <Kbd>C</Kbd> to copy.
 
import { Kbd } from '@arclux/arc-ui-preact';

Press <Kbd>Ctrl</Kbd> + <Kbd>C</Kbd> to copy.
 
<!-- Auto-generated by @arclux/prism — do not edit manually -->
<!-- arc-kbd — requires kbd.css + base.css (or arc-ui.css) -->
<span class="arc-kbd">
  <kbd class="kbd">Kbd</kbd>
</span>
 
<!-- Auto-generated by @arclux/prism — do not edit manually -->
<!-- arc-kbd — self-contained, no external CSS needed -->
<span class="arc-kbd" style="display: inline">
  <kbd style="display: inline-flex; align-items: center; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; line-height: 1; color: rgb(138, 138, 150); background: rgb(17, 17, 22); border: 1px solid rgb(34, 34, 41); border-bottom-width: 2px; border-radius: 4px; padding: 2px 6px; white-space: nowrap; user-select: none; vertical-align: baseline">Kbd</kbd>
</span>

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