Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Button with Kbd (Link) for Solid

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

UI library: Ark UI

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 Solid, Ark UI does not bind the keys.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Part of Pro

Anatomy

Button anatomy: root, icon, text

Usage

<Button variant="link">
    Button
    <Kbd>⌘K</Kbd>
  </Button>

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 Solid?

Pass asChild and spread the props it gives you on your link.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.

API Reference

Button

Sets variant="link". The rest is on the Button page.

Kbd

No extra props in this demo. The rest is on the Kbd page.