Adapted from the canonical English UIX documentation by Lint-Free-Technology/uix, CC BY 4.0. Source:
dev/ 9.0.0-beta.8, revision e4a1caa, reviewed 2 November 2026. This source mirror may describe preview behavior beyond stable 8.4.0. Markup adapted for this site; the original documentation remains authoritative.
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.
- :material-button-cursor: Button — insert an interactive
ha-buttonelement as a sibling after any element within the forged element. - :material-badge-account-horizontal-outline: Badge — insert a Web Awesome-styled
uix-badgeas 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-eventactions and expose their data as template variables. - ⭐ Tile Icon — insert a
ha-tile-iconelement as a sibling before or after any element within the forged element. - 🛡️ State Badge — insert a
state-badgeelement as a sibling before or after any element within the forged element. - :material-grid: 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.
- :material-map: Map — preserve the zoom level and centre of a map card across Home Assistant state updates.
- :material-lock: Lock — overlay a lock icon on any element to block interaction until the user passes a PIN, passphrase, or confirmation challenge.
- :material-information-outline: More-info — embed Home Assistant more-info content for an entity inside a forged element.
- :material-form-select: Form — add a Home Assistant form and optional submit and clear actions to a forged element.
- :material-star-four-points-outline: Overlay Icon — overlay a
ha-icon/ha-state-iconon any element inside the forged element. - :material-image-outline: Background — inject a background layer (colour, image, video, or live camera) behind any element within the forged element.
- :material-palette: Theme — apply a Frontend theme to the forged element or one of its descendants.