Skip to content
GaudiGaudi Design System home

Search documentation

Search every page, heading and paragraph.

Kbd

Kbd renders keyboard keys and multi-key shortcuts.

CoreBasics@gaudi/design-system/core/KbdView in StorybookSource

Installation

pnpm add github:ahmadassaf/design-system

Import from @gaudi/design-system. Load @gaudi/design-system/global.css once and add transpilePackages: ['@gaudi/design-system'] in Next.js.

import Kbd from '@gaudi/design-system/core/Kbd';

Copy an example into your project with the shadcn CLI: npx shadcn@latest add https://design.gaudi.site/r/kbd-in-controls.json.

Usage

import { Kbd } from '@gaudi/design-system';
<Kbd keys='command,shift,k' size='sm' variant='raised' />

Playground

Kbd props
Props
default md
default raised
Kbd.jsx
import Kbd from '@gaudi/design-system/core/Kbd';
<Kbd keys='cmd,k' />

Examples

Shortcuts in controls

Storybook

Keys, groups and icons

Storybook

API

5 props

Accessibility

Keyboard shortcuts expose readable aria-label text such as Command plus K while keeping visual symbols compact.

TooltipBrief contextual help attached to an independently labelled control.4 examplesInputText, search, numeric and date inputs with prefix and suffix slots.11 examplesAspectRatioKeep media at a stable aspect ratio as its container resizes.1 exampleAvatarProfile images, resilient initials, presence, verification, account menus and collaborator groups. The existing Avatar API and curated patterns share the same image and fallback primitives.10 examplesButtonButton renders the Gaudi action and link-button variants.7 examplesButtonGroupGroup related actions with joined borders and consistent sizing.9 examples