šŸ”˜ Piotras Smart Button

Share your Projects! Dashboards & Frontend
, , ,
1

:radio_button: Piotras Smart Button

A high-performance button card for Home Assistant ā€” Most cards go silent after calling a service. This one tells you it worked.

Zrzut ekranu (1196)
Zrzut ekranu (1196)800Ɨ374 49.1 KB

:sparkles: Features

  • Visual Editor ā€” full GUI with tabs: General, Size, Background, Icon, Text, Layout, Slider & Power, Filters, Actions, Service. No manual YAML needed.
  • 9-Grid Layout System ā€” place Icon, Name, and State badge independently across a 3Ɨ3 matrix.
  • Adaptive Auto-Sliders ā€” smart detection of Brightness, Color Temp, Volume, Cover Position, Fan Speed. Zero configuration required.
  • Dynamic Backgrounds ā€” solid color, 2/3-color gradients, or full-resolution background images.
  • Smart Filter Engine ā€” CSS filters (brightness, saturation, grayscale) applied automatically per ON/OFF state.
  • Service Countdown ā€” animated SVG circle or progress bar after call-service, with optional card blockade.
  • Power Monitoring ā€” real-time consumption bar with configurable pulse warning threshold.
  • Font Styles ā€” 4 text presets for Name and State labels.
  • Advanced Action Engine ā€” Tap, Double-Tap, and Hold, optimized for both mobile and desktop.
  • Visual Editor Full GUI ā€” General, Size, Background, Icon, Text, Layout, Slider & Power, Filters, Actions, Service tabs. No YAML required.

:compass: Navigation Mode

Zrzut ekranu (1173)
Zrzut ekranu (1173)495Ɨ160 27.1 KB

:bulb: Light & Auto-Dimmer Slider

Zrzut ekranu (1180)
Zrzut ekranu (1180)788Ɨ148 55.8 KB

Zrzut ekranu (1181)
Zrzut ekranu (1181)786Ɨ146 65.9 KB

:electric_plug: Socket & Power Monitoring

Zrzut ekranu (1177)
Zrzut ekranu (1177)787Ɨ153 67.8 KB

Zrzut ekranu (1178)
Zrzut ekranu (1178)784Ɨ147 78.6 KB

:scroll: Script Button

Zrzut ekranu (1184)
Zrzut ekranu (1184)785Ɨ138 46 KB

Zrzut ekranu (1185)
Zrzut ekranu (1185)785Ɨ140 59.2 KB

:loud_sound: Media Player

Zrzut ekranu (1186)
Zrzut ekranu (1186)400Ɨ145 29.7 KB

Zrzut ekranu (1188)
Zrzut ekranu (1188)397Ɨ141 36.1 KB

:gear: Installation

Method 1: Via HACS (Recommended)

  1. Click the button below to automatically add the repository to your HACS:
Open your Home Assistant instance
  1. Click Add in the pop-up window.
  2. Once the repository page opens, click Download.
  3. After downloading, do a Hard reload of your browser.

Method 2: Manual Installation

  1. Download this repository as a ZIP file and extract it.
  2. Inside your Home Assistant config/www/ directory, create a new folder named piotras-smart-button.
  3. Copy the compiled files (from dist/ folder) into config/www/piotras-smart-button/.
  4. Go to Settings ā†’ Dashboards ā†’ Resources.
  5. Click Add Resource and enter:
/local/piotras-smart-button/piotras-smart-button-loader.js?v=1.0.0
  • Resource type: JavaScript Module
  1. Hard reload your browser (Ctrl+Shift+R).
2

You should also upload the source code to github, not just the dist files :eyes:

3

Thanks for the suggestion. Currently, Iā€™m focusing on refining the stable dist version to ensure the best user experience. The full source code will be made available alongside the official HACS release. If the official Home Assistant HACS submission process requires it, the repository will be updated accordingly. For now, my priority is delivering a polished final product. Please stay tuned for the official HACS launch.

4

Release v1.1.0

Editor Fix ā€” Config State Display + Minor Card Fixes

Fixed editor incorrectly showing default values instead of actual YAML config. Toggles, number and text fields now correctly reflect saved state. Minor card fix: removed hardcoded widths on service bar and slider zones ā€” now fully responsive to card_width setting.