Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Button examples · Secondary

Button with Kbd (Secondary) for React

A muted button with a keyboard hint beside the label, when a supporting action has a keyboard shortcut worth showing.

Framework
UI library

Secondary fill, the label, and a kbd showing ⌘K. Nothing in the demo listens for that chord.

Use it when the shortcut exists and this button is not the main one in the row. Show the keys people actually press. A lone Kbd is enough if there is nothing to click. In React, Base UI does not attach the 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?

variant="secondary" is the quieter fill. The cap adds bg-background so it separates from that fill. The text inside is still ⌘K.

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.

Can I disable the button and keep the hint?

disabled fades the whole control, cap included, and blocks the click. The cap still doesn't listen for keys.

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