Notification dot

Sometimes we want to indicate that something has happened. A dot can indicate a change without drawing too much attention. Standard dot is green. Red dot can be used for more critical notifications.

Green dot (standard)

<button class="btn relative">
  <span data-mybicon="mybicon-arrow-down" data-mybicon-class="icon-ui"></span>
    Button
  <span class="mb-dot"></span>
</button>

Red dot

<button class="mb-tab relative flex flex-dir-col tl phm pvs" role="tab">
  <span class="mrm fwb">Low stock</span><span>Articles: 4</span>
  <span class="mb-dot mb-dot--red"></span>
</button>