Kbd

Installation

Package

@bigbang/ui

Import

import { Kbd } from '@bigbang/ui';

Source

Kbd.tsx

Storybook

Kbd · Playground

Kbd is in the @bigbang/ui package.

import { Kbd } from '@bigbang/ui';

<Kbd keys={['mod', 'K']} />;
<Kbd>F2</Kbd>;

Props

children

Description

One key as text, such as K. Use keys for a combination or a named key.

Type

ReactNode

keys

Description

A key combination in press order, such as ['mod', 'K']. Named keys (mod, shift, enter, arrows…) get symbols and spoken names.

Type

readonly KbdKey[]

platform

Description

Platform for mod and the modifier symbols. Detected in the browser; the server renders 'other'.

Type

Platform

size

Description

Key size: sm is 20 px with 12 px text and suits body text, menus and tooltips; md is 24 px with 14 px text.

Type

'sm' | 'md'

Default

'sm'

className

Description

For layout only: margins and placement.

Type

string

Data attributes

• data-component="kbd": on the outer <kbd>.
• data-part: key, separator.