---
title: "Action key Shortcut  — Free Framer component · Best of Framer"
description: "Free Framer component · by Manivannan Meenakshi Sundaram · Buttons. The Keyboard Shortcut component makes it easy to add hotkeys to your prototypes and projects in Framer."
canonical: "https://framer.elliotli.dev/component/action-key-shortcut"
---

[Home](/)/[Components](/components)/[Buttons](/components/category/buttons)/Action key Shortcut

# Action key Shortcut

[View on Framer](https://framer.com/marketplace/components/action-key-shortcut/?via=elliot-li)

![Action key Shortcut  preview image 1](https://framer.elliotli.dev/og/component/action-key-shortcut/3ebe44ca5e9badbb/1600x1200.jpg)

## Summary

The Keyboard Shortcut component makes it easy to add hotkeys to your prototypes and projects in Framer.

## Description

The **Keyboard Shortcut** component makes it easy to add hotkeys to your prototypes and projects in Framer. Instead of relying only on clicks or taps, you can map any key to trigger an action.

**How to Use**

1.  **Copy & Paste** – Drag or paste the Keyboard Shortcut component into your canvas.
    
2.  **Attach to a Target** – Place it inside the button (or any element) you want to control.
    
3.  **Positioning** – Change the position to absolute and set z-index to -1 so it doesn’t block interaction.
    
4.  **Customize Properties** – Choose the key you want (e.g., B) and assign the action you’d like to trigger (e.g., “Book a call”).
    
5.  **Test** – When you preview the prototype, pressing the assigned key will trigger the action.
    

**Features**

-   Works with any element inside Framer.
    
-   Customizable keys for different actions.
    
-   Non-intrusive (hidden layer with negative z-index).
    
-   Simple, flexible, and reusable across multiple projects.
    

**Best Practices**

-   Use unique keys for different actions to avoid conflicts.
    
-   Keep shortcuts intuitive (e.g., S for Save, B for Book).
    
-   Provide visual hints or tooltips in your design so users know shortcuts exist.
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #7565

## Details

- **Author**: Manivannan Meenakshi Sundaram
- **Published**: 2025-09-21
- **Updated**: 2025-09-18
- **Added**: 2025-09-05
- **Categories**: Buttons

## More like this

-   [Liquid Blob Button](/component/liquid-blob-button) — Oddframe · Free — Interactive Liquid Blob CTA Button
-   [Pixel Face Toggle](/component/pixel-face-toggle) — Zac Nielson · $9 — Dark mode switch with a pixel face
-   [Liquid Hover Media](/component/liquid-hover-media) — Bardia Madani · $5 — Fluid media distortion on hover
-   [Eye Glow Button](/component/eye-glow-button) — Frame Native · Free — Cursor-following eyes, soft glow