Open Close
Teva VIsion
Font Face
Teva Sans Latin
Drafts & Templates
PBS Templates
Primitives & components context
Teva Global
Primitives & components: Teva Global

Floating Alert V2

v0.0.0

The alert itself (initially invisible). Can be opened using a trigger. Only one should be present on a page A trigger button is required to be able to see the floating alert.

Note the aria-attributes to make this component WCAG-compliant.

<!-- Button type: solid  -->
<button aria-controls="floating-alert" data-floating-alert-msg="Alert triggered message" type="button" class="vi-floating-alert-trigger vi-btn-solid vi-btn">Alert!</button>

Triggers #

A few triggers each showing a different message.

<!-- Button type: solid  -->
<button aria-controls="floating-alert" data-floating-alert-msg="Alert triggered message" type="button" class="vi-floating-alert-trigger vi-btn-solid vi-btn">Alert!</button>
<!-- Button type: solid  -->
<button aria-controls="floating-alert" data-floating-alert-msg="A second alert message" type="button" class="vi-floating-alert-trigger vi-btn-solid vi-btn">Alert!</button>
<!-- Button type: solid  -->
<button aria-controls="floating-alert" data-floating-alert-msg="A third message in which you can't inject javascript &lt;script&gt;alert(&quot;This should not be visible&quot;)&lt;/script&gt;" type="button" class="vi-floating-alert-trigger vi-btn-solid vi-btn">Alert!</button>

Note to developer #

The alert itself is rendered via js (See const floatingAlertHtml in index.js). Only one will be present on a page

Stylesheets #

The following stylesheets are required to display this component.

JavaScript #

The following javascript is required to display this component.

Usage documentation #

Usage documentation can be found here.

Changelog #

Changelog

Fix

  • 15 Apr 2025 - (floating-alert-v2) Fix stacking order in regard to new header.

Added

  • Initial draft