Beacon v0.23.0+

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. 

<div>
  <hx-beacon></hx-beacon>
</div>

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. 

<!-- Providing a border around the <div> for illustration -->
<div style="position: relative;">
  <hx-beacon style="top: 42%; left: 24px;"></hx-beacon>
  <hx-disclosure class="hxBtn" aria-controls="basicMenuId">
    <hx-icon type="cog"></hx-icon>
    <span>Actions</span>
    <hx-icon class="hxPrimary" type="angle-down"></hx-icon>
  </hx-disclosure>
  <hx-menu id="basicMenuId">
    <hx-menuitem>Action 1</hx-menuitem>
    <hx-menuitem>Action 2</hx-menuitem>
    <hx-menuitem>Action 3</hx-menuitem>
  </hx-menu>
</div>

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. 

<!-- Providing a border around the <div> for illustration -->
<div style="position: relative;">
  <hx-beacon style="top: 42%; left: 24px; --hxBeacon: #d32f2f;"></hx-beacon>
  <hx-disclosure class="hxBtn" aria-controls="overrideMenuId">
    <hx-icon type="cog"></hx-icon>
    <span>Actions</span>
    <hx-icon class="hxPrimary" type="angle-down"></hx-icon>
  </hx-disclosure>
  <hx-menu id="overrideMenuId">
    <hx-menuitem>Action 1</hx-menuitem>
    <hx-menuitem>Action 2</hx-menuitem>
    <hx-menuitem>Action 3</hx-menuitem>
  </hx-menu>
</div>

See Also