Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Kbd examples · Pressed State

Disabled State Kbd for React

A faded Command key with a not-allowed cursor, for a shortcut that's unavailable.

Framework
UI library

Some shortcuts only work in some places: Save with nothing to save, Paste with an empty clipboard. This React example fades a single Command key with opacity-50 and shows a not-allowed cursor over it with cursor-not-allowed, plus pointer-events-auto so that cursor appears, since Kbd ignores the pointer by default.

Preview

Preview width
⌘

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

When should a shortcut look disabled?

When the command exists but can't run right now, and showing it helps people learn it: a menu item that's disabled, a toolbar action without a selection. If a shortcut never applies on a screen, leave it out.

Which classes make the key look disabled?

opacity-50 fades the cap to half strength, the same treatment disabled controls get across the components. cursor-not-allowed shows the not-allowed cursor, which only works with pointer-events-auto because Kbd turns pointer events off.

Should I show disabled shortcuts or hide them?

Show them when the command will become available, so the layout stays put and people learn the shortcut. Hide them when the command doesn't apply to the screen at all.

Should a disabled key be focusable?

A Kbd is never focusable. The control it belongs to decides: a disabled menu item or Button carries the disabled state, and its shortcut fades with it.

How do I show that part of a shortcut is unavailable?

Fade the whole shortcut, not one key: a chord either works or it doesn't. Put the classes on the KbdGroup, or on the control that contains it.

Do screen readers know the shortcut is disabled?

Not from the fade. The disabled state has to come from the control the shortcut belongs to, such as a disabled menu item, which assistive technology announces as unavailable.

All 39 kbd examples