🎯 Actions Card - Add Tap, Hold & Double-Tap Actions to Any Card

[nutteloost]

Hi everyone!

I’m happy to share Actions Card - a wrapper card that has the possibility to add a tap-action, hold action and / or double-tap action.

Why I Created This Card

I noticed that many (custom) cards don’t support interactive actions, or I wanted to override their default behavior. For example, entity cards show the more-info dialog when tapped, but what if you want them to navigate to another view instead? My use-case was a custom camera card that did not support a tap-action, so I created my own custom card to achieve this.

Features

• Add tap, hold, and double-tap actions to ANY card
• Multiple action types:
  • Toggle entities
  • Navigate to other views
  • Open URLs
  • Call services
  • Show more-info dialogs
  • Open the Assist dialog
  • Fire custom DOM events
• Optional confirmation dialogs
• Configurable hold time
• Can prevent / override default entity dialogs
• Full visual editor support

Every Home Assistant action is supported!

Configuration Example

type: custom:actions-card
card:
  type: entities
  title: Lights
  entities:
    - light.living_room
    - light.kitchen
    - light.bedroom
tap_action:
  action: toggle
hold_action:
  action: more-info
  confirmation: Are you sure you want to see more info?
double_tap_action:
  action: navigate
  navigation_path: /lovelace/lights
prevent_default_dialog: true

Visual Editor

Installation & More Information

For installation instructions and full documentation:

GitHub - nutteloost/actions-card: Wraps another Home Assistant card to add tap, hold, and double-tap actions

I’d love to hear how you use this card in your setup and any suggestions for improvements!

[WallyR (Wally)]

This sound great.
It looks like it can make markdown cards interactive and then a lot of possibilities are available.
I am going to try that soon.

Thanks for the effort!

[greyspace07]

Thanks for sharing this! I wrapped the media control card from my main dashboard to a panel view dashboard of the same card (and wrapped it back to main dashboard url). Effectively, I have a full-screen “Now Playing” from my Wiim streamer and can go back and forth with double taps on my tablet. This let me go full kiosk mode with no sidebar. Made my setup just a little bit more slick. Thanks!

[GSD (Gabriel Dragan)]

Hi,
I just installed your card… it looks like it has potential, but it could use some improvements…
For example, what happens when I have a custom card with multiple layers, like grid layouts with custom cards, within grid layouts with custom cards, (some of them with actions)? It’s one of my use cases, don’t ask why, but It seems that it can’t differentiate between layered actions, like when I initiate an action in one of the lower level cards, this card initiates the action as well, at the same time.
It seems that it could use some layer handling, like z-index, or something. I mean… yes, I embed a complex setup, with multiple layers, but there should be an option to set this card’s actions to the lowest level, if I wish to, or any level, for what is worth…

Thank you!

[nutteloost]

A custom card with multiple layers? I don’t think you’re using the Actions Card correctly. Just wrap one custom card inside an Actions Card and configure your action just for that custom card. So do not wrap a grid card as it will apply the Action to all of the child cards.
I think that whatever you’re trying to achieve probably works fine, but you’re using it wrong.

The Actions Card is just for adding an action to any card that does not allow the user to configure an action. It is a wrapper card. If you’re trying to add an action to one of your card, you can use the Actions Card, if you’re trying to achieve something else, then this is not the right card for you.

The action will be applied to the whole card. This is what the card does and that won’t change. If you want to do a feature request, please do on the GitHub page and explain your request with as much details as possible.

[GSD (Gabriel Dragan)]

I need the action in the top layer, on the parent container, so I have no other choice but to wrap everything in it, this transmits the action to the child elements as well. The child elements now perform two actions, one inherited from the wrapper.

So what I’m asking… would this be doable? a layer filtering of some sort, I mean.

[nutteloost]

The action is always the top layer. If you don’t want the action from the child card, just set the toggle ‘prevent_default_dialog: true’…

I’m still not sure exactly what you try to achieve… Please send your yaml configuration and show me exactly what you’re trying to configure.

You should still just wrap each individual child card inside an actions card, this is how the Actions Card should be used instead of wrapping a parent container and trying to add complex layering.

WRONG WAY

type: actions-card
tap_action:
action: navigate
navigation_path: /some-path
card:
type: grid
cards:
- type: custom-card-1 # This card has its own actions
- type: custom-card-2 # This card also has its own actions
- type: custom-card-3 # Actions conflict!

RIGHT WAY

type: grid
cards:

• type: actions-card # Wrap only cards that need actions
  tap_action:
  action: navigate
  navigation_path: /path-for-card-1
  card:
  type: custom-card-1

• type: custom-card-2 # Leave cards with existing actions unwrapped

  This card keeps its own actions

• type: actions-card # Wrap another card with different action
  tap_action:
  action: toggle
  entity: light.bedroom
  card:
  type: custom-card-3

[GSD (Gabriel Dragan)]

I need an action on the top level container, let’s say the grid card, in your example. The grid card has no tap or hold or double tap action, natively, by itself, so I wrap it in your card. The grid has multiple child elements, some of them with their own tap action defined, but they also inherit the tap action from the top level container.
I’m just saying there should be a way to prevent the child element from inheriting the parent container’s action, if possible, of course.

[firstcolle]

Thanks for sharing this!

Is there a way to use card-mod to change the card height?
Like this card-mod works without action card

type: custom:actions-card
card:
  type: media-control
  entity: media_player.denon
  card_mod:
    style: |
      ha-card {
      height: 258px !important;
      }
tap_action:
  action: none
hold_action:
  action: none
double_tap_action:
  action: navigate
  navigation_path: /lovelace/media-player
prevent_default_dialog: false

[nutteloost]

Your configuration is actually correct! The way you’re applying card_mod to the wrapped card is the proper approach with actions-card. The actions-card wrapper is designed to adapt to its content.

[firstcolle]

thanks for the answer.
could you try my code? because it does not work for me and I would like to understand if I am doing something wrong.
thanks

[nutteloost]

I tried your code and it works fine on my end…

Without the card_mod:

With the card_mod:

[firstcolle]

i don’t understand…
The same code is not working for me.
I’m on the latest home assistant OS version 2025.8.1 and in all other situations card mod works.

I’ve also tried with a light card but the result is the same.

[WallyR (Wally)]

Is it a standalone card or is it nested inside something else?

[nutteloost]

@firstcolle , I just released v1.4.2 of the Actions Card in which I added a fix for your issue. It will not re-scan for card-mod styling applied to child cards after the child cards are created. Hopefully this will fix your issue.
If it does not, please open a Bug report on the GitHub page so we can continue our conversation regarding this issue.

@WallyR ; it’s a wrapper card. So basically it will nest another card and add some features such as tap, hold and double-tap action to the wrapped card.

[firstcolle]

I tried the new version and the problem is not solved. I’ll open an issue on gitub.

Thanks

[nutteloost]

Version 1.5.0 is just released which also adds Swipe Actions support!

Actions Card v1.5.0

New Features

• Swipe Gestures: Added support for swipe actions in four directions (left, right, up, down). Swipe gestures work with both touch and mouse input, making the card fully interactive on all devices. Each direction can be configured with any supported action type—navigate between views, toggle lights, call services, and more.

Improvements

• Visual Editor Enhancements: Polished the visual editor interface with improved layout, action and swipe icons and better organization. Swipe actions are now available in a dedicated expandable section, making it easier to configure all gesture types without cluttering the interface.

[fnacer (Reed)]

I tried wrapping a Media Control card and cannot get it to work properly. Here’s what the YAML looks like:

type: custom:actions-card
card:
  type: media-control
  entity: media_player.kitchen
tap_action:
  action: call-service
  service: media_player.media_play_pause
  service_data:
    entity: media_player.kitchen
double_tap_action:
  action: more-info
  entity: media_player.kitchen

I am a backend/data developer but a newbie at HA. So I wasn’t sure whether I was specifying the double tap properly. But here’s what isn’t working:

• Single tap doesn’t do appear to do anything
• The single tap action overrides all the child card button. So when I add a confirmation dialog to play/pause, the confirmation dialog is displayed when I try to go to the next track or click … on the child card.

I’d appreciate any corrections to what I am doing. Thanks.

[nutteloost]

@fnacer , it looks like the call-service action is not working. Please open a bug report on GitHub for this issue, there where I track the issues.

All actions override the child cards actions. The actions are added to the card itself, not on individual elements.

[nutteloost]

This issue should be fixed in the latest release v1.5.3