Kbd

Data Display

Stable

Keyboard shortcut display component. Use KbdGroup for multi-key combinations. Styling adjusts automatically inside tooltip content.

Quick Import

Full Documentation

import { Kbd } from "@cohere-ai/waypoint-ui/kbd";

Live Preview

Loading Kbd...

Open in Storybook Open in v0 View Docs

Examples

Single Key and Combination

Single key and multi-key shortcut examples

1 import { Kbd, KbdGroup } from '@cohere-ai/waypoint-ui/kbd';
2  
3 {/* Single key */}
4 <Kbd>Enter</Kbd>
5  
6 {/* Key combination */}
7 <KbdGroup>
8   <Kbd>⌘</Kbd>
9   <Kbd>K</Kbd>
10 </KbdGroup>

Additional Resources

View in Storybook

Explore all variants and interactive examples

Full Documentation

Complete API reference, advanced usage, and accessibility info

Related Components

These components work well together or serve similar purposes.

Tooltip

Contextual information on hover or focus. Use LazyTooltip for performance in lists. Includes TooltipProvider for delay configuration.

Overlays

TooltipButton

Button with an integrated tooltip. Uses LazyTooltip by default. Renders as a plain Button when no tooltip prop is provided.

Form Controls

Found an Issue?

If you've encountered a bug or have feedback about the Kbd component, please report it to our team. Your feedback helps us improve Waypoint.

Available for all users • Issue will be created in Linear

Was this page helpful?

Your feedback helps us improve our documentation.

1	import { Kbd, KbdGroup } from '@cohere-ai/waypoint-ui/kbd';
2
3	{/* Single key */}
4	<Kbd>Enter</Kbd>
5
6	{/* Key combination */}
7	<KbdGroup>
8	<Kbd>⌘</Kbd>
9	<Kbd>K</Kbd>
10	</KbdGroup>

Kbd