Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Button examples · Standard

Button with Kbd (Standard) for React

A filled button with a keyboard hint beside the label, when the main action has a shortcut people can actually use.

Framework
UI library

Primary button, the label, then a kbd showing ⌘K. The demo does not listen for the keys. You add that, and you should show Ctrl where people are not on a Mac.

Use it for Search or Save when the shortcut is real and you want it visible. If you only need the look of a key, use Kbd on its own. In React, Kbd styles the hint and doesn't register a listener.

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

Does pressing ⌘K activate this Button?

No. Kbd draws the characters ⌘K. It doesn't register a listener, and it's pointer-events-none, so the click still hits the button. The shortcut itself belongs in your own handler.

How do I show a different shortcut?

Change the children of Kbd. The demo doesn't translate Mac and Windows keys, so write the label for the platform you mean, such as Ctrl B when a symbol would be unclear.

How is the key cap colored here?

The button is the default primary fill. The cap sets bg-primary-foreground/20 and text-primary-foreground so it sits on that fill instead of fighting it.

Can I put the shortcut before the label?

Yes. Move Kbd ahead of the text. In this demo it follows the label, which is the usual place for a hint on the trailing side.

Will the cap steal the click?

No. Kbd turns pointer events off. Pressing the button still fires the button.

Is the shortcut announced?

The cap's text is inside the button, so it's read with the label. This demo comes out as Button, then the command mark and K. Rename the button's children to the action so that phrase makes sense.

All 35 button examples