Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Button examples · Link

Button with Kbd (Link) for React

A link-styled button with a keyboard hint beside the label, when a quiet action has a keyboard shortcut worth showing.

Framework
UI library

The link variant, with a kbd that reads ⌘K. The hint is only visual. Those keys do nothing until you listen for them.

Use it where people already know the shortcut and you want a reminder. If the shortcut is the feature, a Kbd outside the button is enough. In React, Base UI does not bind the keys.

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 ⌘K fire this link-styled Button?

No. Kbd only shows ⌘K, with pointer events off so it won't take the click. You write the listener. Kbd is the label, not the shortcut.

How does the cap look on a link Button?

variant="link" is primary text and an underline on hover, with no fill. The demo uses a plain Kbd, no extra color class, after the label.

How do I show Ctrl instead of ⌘?

Edit the children. The demo doesn't detect the platform. Use the words Ctrl and K when the symbol would be ambiguous.

How do I make it open a page in React?

Pass your link with render, such as render={<a href="/pricing" />}.

The cap can stay inside. It still won't listen for the keys.

Can the shortcut sit in a sentence with the button?

Yes. There's no fill, so the label and the cap can sit in a toolbar line or a card footer. Put the cap after the action name, as the demo does.

What gets announced?

The button's text plus the cap's text. Change Button to the real action so Button ⌘K isn't the name people hear.

All 35 button examples