shadcn.io is an independent project built on shadcn/ui
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 Solid, Ark UI does not attach the listener.
Installation
Anatomy
Usage
<Button variant="secondary">
Button
<Kbd class="bg-background">⌘K</Kbd>
</Button>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.
API Reference
Button
Sets variant="secondary". The rest is on the Button page.
Kbd
No extra props in this demo. The rest is on the Kbd page.
