Beacon v0.23.0+ HelixUI v0.23.0 or later required

A Beacon is an animation that attracts a user's attention to a new feature or advanced functionality in a control panel.

Basic Beacon

A beacon will emit a dismiss event and it will also be removed from the DOM, when a user clicks it.

Beacon with Inline Styles

This is an example implementation of <hx-beacon>. We leave it to HelixUI implementors to decide what works best for their applications.

The parent element of the Beacon must have position:relative set. Additionally, you may have to use inline or additional styles to adjust the <hx-beacon> position. Valid styles are top, bottom, left, right. (Please see demo snippet below)

Use percentages and/or pixel values to adjust the position relative to the parent element.

Actions Action 1 Action 2 Action 3

Beacon with Color Override

This is an example implementation of <hx-beacon> with color override. Hexidecimal or named color values are valid, though hex values are best practice for consistency.

User can use --hxBeacon property for overriding the default Beacon component color. (Example:--hxBeacon:#d32f2f or --hxBeacon:red)

Hexadecimal and named colors are valid values.

Actions Action 1 Action 2 Action 3

See Also