Skip to content

Sparks

Sparks are optional behaviours added to a UIX Forge forged element via the forge.sparks list. Each spark has a type key and its own configuration options.

Available sparks:

  • 💬 Tooltip — attach a styled tooltip to any element within the forged element.
  • Button — insert an interactive ha-button element as a sibling after any element within the forged element.
  • Badge — insert a Web Awesome-styled uix-badge as a sibling before or after any element within the forged element.
  • 🏷 Attribute — add, replace or remove an attribute of any element within the forged element.
  • ⚡ Event — receive DOM events from fire-dom-event actions and expose their data as template variables.
  • ⭐ Tile Icon — insert a ha-tile-icon element as a sibling before or after any element within the forged element.
  • 🛡 State Badge — insert a state-badge element as a sibling before or after any element within the forged element.
  • Grid — apply CSS Grid layout to any container element within the forged element.
  • 🔍 Search — find elements within a container by CSS selector and optional text filter, then apply class, attribute, or text mutations to all matches.
  • Map — preserve the zoom level and centre of a map card across Home Assistant state updates.
  • Lock — overlay a lock icon on any element to block interaction until the user passes a PIN, passphrase, or confirmation challenge.
  • More-info — embed Home Assistant more-info content for an entity inside a forged element.
  • Form — add a Home Assistant form and optional submit and clear actions to a forged element.
  • Overlay Icon — overlay a ha-icon/ha-state-icon on any element inside the forged element.
  • Background — inject a background layer (colour, image, video, or live camera) behind any element within the forged element.
  • Theme — apply a Frontend theme to the forged element or one of its descendants.