Skip to content

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

Free

Keyboard Shortcuts Button Group for Vue

Copy, Save, and Export buttons showing the shortcuts ⌘C, ⌘S, and ⌘E, in a row and in a vertical group.

UI library: Ark UI

Three actions that display a shortcut. Copy shows ⌘C, Save shows ⌘S, and Export shows ⌘E. In the row the key cap follows the label. In the vertical group the label is at the start and the cap is at the end. Pressing those keys does nothing.

Show the cap as a reminder for a shortcut you listen for yourself. If the keys matter and the button does not, a Kbd on its own is enough. In Vue, Ark UI does not bind ⌘C, ⌘S, or ⌘E.

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.
Get MCPSee plans
Part of Pro

Anatomy

Button Group anatomy: root, group, button, separator

Usage

<div class="flex flex-col gap-4">
  <ButtonGroup aria-label="File actions">
    <Button size="sm" variant="outline">
      <CopyIcon aria-hidden="true" data-icon="inline-start" />Copy<Kbd class="ms-2">⌘C</Kbd>
    </Button>
    <Button size="sm" variant="outline">
      <SaveIcon aria-hidden="true" data-icon="inline-start" />Save<Kbd class="ms-2">⌘S</Kbd>
    </Button>
    <Button size="sm" variant="outline">
      <DownloadIcon aria-hidden="true" data-icon="inline-start" />Export<Kbd class="ms-2">⌘E</Kbd>
    </Button>
  </ButtonGroup>
  <ButtonGroup aria-label="File actions" orientation="vertical">
    <Button class="justify-between" size="sm" variant="outline">
      <span class="flex items-center gap-2"><CopyIcon aria-hidden="true" />Copy</span>
      <Kbd>⌘C</Kbd>
    </Button>
    <Button class="justify-between" size="sm" variant="outline">
      <span class="flex items-center gap-2"><SaveIcon aria-hidden="true" />Save</span>
      <Kbd>⌘S</Kbd>
    </Button>
    <Button class="justify-between" size="sm" variant="outline">
      <span class="flex items-center gap-2">
        <DownloadIcon aria-hidden="true" />Export
      </span>
      <Kbd>⌘E</Kbd>
    </Button>
  </ButtonGroup>
</div>

FAQ

Does pressing ⌘C trigger Copy?

No. Kbd only draws the keys. Register the shortcut in your own key handler and run the same action as the button.

How is the key cap spaced in the row?

It has ms-2, a margin on the start side, so it keeps its distance from the label in either reading direction.

How does the vertical group push the cap to the end?

Each button has justify-between. The icon and label are wrapped in one span, so there are two children and the cap goes to the far side.

Are the shortcuts announced?

Yes. The cap's text is inside the button, so Copy is read with ⌘C. Use aria-keyshortcuts on the button if you want assistive tech to know the shortcut too.

How do I show Ctrl on Windows?

Pick the label from the platform before you render, such as Ctrl C on Windows and Linux. The demo always shows ⌘.

Do the buttons do anything?

No. They have no handler. Copy, Save and Export are labels for the layout.

API Reference

Button Group

Sets aria-label="File actions" and orientation="vertical". The rest is on the Button Group page.

Button

Sets size="sm" and variant="outline". The rest is on the Button page.

Kbd

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

All 39 button group examples