The Kbd component is used to display keyboard inputs or shortcuts in a semantic and visually consistent way.
It is commonly used in documentation, tutorials, and UI hints to indicate user actions.

• Semantic meaning: Clearly represents keyboard input (Ctrl, Enter, etc.).
• Consistent styling: Monospace and accessible default appearance.
• Flexible usage: Works inline with text or inside UI components.
• Composable: Can be combined with shortcuts, tooltips, or guides.

Usage Example

Preview

Ctrl K

Ctrl K

Ctrl K

Ctrl K

Ctrl K

Code

<script lang="ts">
  import { Constants } from "@fefade-ui/core"
  import { Kbd } from "@fefade-ui/svelte"
</script>

{#each Constants.sizes as size (size)}
  <div>
    <Kbd {size}>Ctrl</Kbd>
    <Kbd {size}>K</Kbd>
  </div>
  <br />
  <br />
{/each}

Props

Prop	Type	Default	Description
children	node	—	The keyboard key or shortcut text to be displayed.
class	string	""	Optional additional classes for custom styling.
style	string	""	Inline styles for layout or visual customization.

Best Practices

• Use short and recognizable labels (e.g., Ctrl, S, Enter).
• Combine multiple Kbd components to represent shortcuts (e.g., Ctrl + S).
• Avoid overusing in body text to maintain readability.
• Keep styling subtle to preserve semantic meaning.
• Use consistently across documentation for better UX familiarity.