Custom Indicators

The Announcable widget supports custom release note indicators through the data-new-release-notes attribute. This attribute is automatically added to elements matching your anchor_query_selector. Here's an example:

<!-- Element with indicator state -->
<button class="release-notes-button" data-new-release-notes="true">
  Updates
</button>

You can create custom indicators by combining this attribute with your own HTML and CSS:

<button class="release-notes-button" data-new-release-notes="true">
  <span>Updates</span>
  <span class="indicator"></span>
</button>

.release-notes-button .indicator {
  display: none;
}
.release-notes-button [data-new-release-notes="true"] .indicator {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
}

warning

Make sure you set the hide_indicator prop when initializing the widget to avoid multiple indicators. See the overview of initialization parameters for more info.