Kbd

Inline keyboard key hint — semantic <kbd> on web, styled Text on native.

View as JSON Open in Storybook

2.2 kBgzipped

At a glance

Renders a styled monospace pill for keyboard shortcuts in prose or UI labels.
On web, uses a semantic <kbd> element (via react-native-web).
On native, renders a styled <Text> with the same visual appearance.
Subtle border + slight bottom shadow for the classic key look.

Preview

Usage

import { Kbd } from '@nori-ui/core';
 
// Standalone
<Kbd>⌘K</Kbd>
<Kbd>Ctrl+S</Kbd>
<Kbd>Esc</Kbd>
 
// Inside prose
<Text>Press <Kbd>⌘K</Kbd> to open the command palette.</Text>

Props

Prop	Type	Default	Description
`className`	`string`	—	—

Previous

Item

Next

Label

On this page

At a glance Preview Usage Props