Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Button examples · Outline

Button with Kbd (Outline) for React

An outline button with a keyboard hint beside the label, when a secondary action has a keyboard shortcut worth showing.

Framework
UI library

A bordered button and a kbd. The demo prints ⌘K and does not handle the key. Wire the shortcut yourself, and match the symbol to the platform.

Use it for a command people use often that is not the primary button. If there is no shortcut, do not fake one on the Button. In React, Kbd only draws 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 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?

variant="outline" is the bordered button, and the cap is a plain Kbd with no extra color class. The default cap is enough on a background-colored button. Add a class on Kbd if the border and the cap start to blend.

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.

Does the outline button listen for ⌘K?

No. Wire the keys yourself, on the button or the page. The cap is a label.

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