Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Disabled State Kbd for Solid

A single ⌘ cap faded to half opacity, with a not-allowed cursor, for a shortcut that looks unavailable.

UI library: Ark UI

One ⌘ cap is at half opacity. Pointer events are turned back on so the not-allowed cursor can show. The fade is paint. The cap is not a disabled control.

Fade a shortcut when the command exists but cannot run, and put the disabled state on the Button that owns it. In Solid, Ark UI does not announce the cap as unavailable.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Kbd anatomy: kbd, group

Usage

<div class="rounded-md border bg-background p-4">
    <Kbd class="pointer-events-auto cursor-not-allowed opacity-50">⌘</Kbd>
  </div>

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.

API Reference

Kbd

No extra props in this demo. The rest is on the Kbd page.

All 39 kbd examples