Home
Components
Notifications

Notifications

Use to add a red circle indicator to the upper-right of an element. You can apply a data attribute, data-border, to match the background color the element appears on so that the notification appears to cut into the element. The default value without the data attribute is white.

Data Attribute	Background
`data-border="accent"`	.pv-surface-accent

Example
Icon buttons with a notification indicator on different colored backgrounds.

HTML

<button type="button" class="pv-button-icon pv-notification">
  <svg aria-hidden="true" class="pv-icon-24">
    <use xlink:href="#notifications"></use>
  </svg>
</button>
<button type="button" class="pv-button-icon pv-notification" data-border="accent">
  <svg aria-hidden="true" class="pv-icon-24">
    <use xlink:href="#notifications"></use>
  </svg>
</button>

Toast Messages

Use a toast message to indicate a successful or unsuccessful action. Toast messages should disappear automatically after a few seconds, but also include a close button.

Example
A success toast message and an error toast message.

Contract successfully deleted.

Contract could not be deleted.

HTML

<div class="pv-toast-success">
  <svg aria-hidden="true" class="pv-icon-24">
    <use xlink:href="#check-circle"></use>
  </svg>
  <p>Contract successfully deleted.</p>
  <button type="button" class="pv-button-icon">
    <svg aria-hidden="true" class="pv-icon-20">
      <title>Close</title>
      <use xlink:href="#close"></use>
    </svg>
  </button>
</div>
<div class="pv-toast-error">
  <svg aria-hidden="true" class="pv-icon-24">
    <use xlink:href="#alert-circle"></use>
  </svg>
  <p>Contract could not be deleted.</p>
  <button type="button" class="pv-button-icon">
    <svg aria-hidden="true" class="pv-icon-20">
      <title>Close</title>
      <use xlink:href="#close"></use>
    </svg>
  </button>
</div>

Pulsing Dot

Adding a pulsing dot animation indicates that something is new. It is recommended to remove the dot when the element has been viewed. The pulse stops animating after 3 iterations.

Custom Property	Default Value	Description
`--color`	#36C5BA (`$turquoise-40`)	The dot color.
`--size`	6px	The diameter of the dot.

Example

HTML

<button type="button" class="pv-button-ghost">
  <div class="pv-pulsing-dot"></div>Selected Filters
</button>