nori-ui

Kbd

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

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

PropTypeDefaultDescription
classNamestring

On this page

Preview theme