<arc-kbd> Overview
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
- Use Kbd for non-keyboard input like mouse actions or touch gestures
- Put long strings inside a Kbd — it is designed for short key labels (1-5 characters)
- Style Kbd to look like a button — it is a documentation element, not an interactive one
- Nest Kbd elements inside each other
- 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
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 <Kbd>Ctrl</Kbd> + <Kbd>C</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>