Counter Badge

Example

<vega-counter-badge
    color="bg-danger|bg-action"
    dot="false"
    count="9"
>
    <vega-button>Button Example</vega-button>
</vega-counter-badge>

document.querySelector('vega-counter-badge').offset = [
    5,0
];

Example using Dot

<vega-counter-badge
    color="bg-danger|bg-action"
    dot="true"
    count="9"
>
    <vega-button>Button Example</vega-button>
</vega-counter-badge>

Usage

The counter badge is a specific type of badge to show the increment of items.

It may be used for notifications, shopping carts, or other badges where more than one item is represented.

Counter badges have two types:

• The normal type, which includes a small circle including a number indicating a number of items which may be accessible upon selection.
• The dot type, which is a simple circle indicator without a number indicating that actions may be taken on an element.

Properties

Accessibility

• Inline text spacing must be adjustable with custom stylesheets
• id attribute value must be unique