Availability badges

The availability badge is a one tag component and is created by adding the .av-badge class. We recommend using a span, but display: inline-block is set. Note that the colored dots are added by extending the class list with .av-badge-dot.

preview

<span class="av-badge ml-2">availability badge</span>
<span class="av-badge av-badge-dot ml-1 mr-2">availability badge</span>

Colors#

The default variant is gray, but there are 3 more colors. Just add the color class to the component. In this example you can see our recommended way to add the group behavior of the component. The availability badge has text-align: left set, so it's not effected from it parents. Note that when using a colored availability badge, the .av-badge-dot class is not required but added automatically.

  • .av-badge-success
  • .av-badge-attention
  • .av-badge-danger

preview

no selector found (╯°□°）╯︵ ┻━┻

Line breaks#

Now an example of what happens when there is not enough space for the inner wording.

preview

<div style="max-width:140px" id="#showBox">
    <span class="av-badge av-badge-dot">Availability badges with long content</span>
</div>

Change log#

6.5.0 - 2022-02-21#

Changed#

  • SCSS: "Availability badge" | updated default (gray) badge to also show the dot
  • SCSS, HTML: "Availability badge" | added new class .av-badge-dot to display dot before content (previously the dot was added automatically at the colored availability badges)