Badge

A very small component used to indicate a certain amount. Based on the amount, it changes background-color. It can also be used in a helper and represented by an icon instead of a number.

Default

The default badge is displayed in a rose-like background-color and contains a value above 0.

px 

			
				<span class="a-badge  ">
	1
</span>
<span class="a-badge  ">
	9+
</span>

Disabled

The disabled badge has no value and is indicated by the number "0" and displayed in a grey/ disabled color.

A disabled badge is created by applying the states:

  • is-disabled
px 

			
				<span class="a-badge  is-disabled">
	0
</span>

Theme purple

The informational badge is used to convey extra information to certain labels or next to form elements.

px 

			
				<span class="a-badge a-badge--theme-purple ">
	?
</span>

Documentation

Modifiers

  • a-badge--theme-purple

    Change the standard theme of the badge to a more purple like variant

States

  • is-disabled

    Indicate that the badge has a value of 0, this will change the background-color to a more grey-like disabled state.