@workday/canvas-kit-css-badge

Canvas Kit CSS Badge

The count badge provides a quantity-based summary with dynamic values.

Installation

yarn add @workday/canvas-kit-css

or

yarn add @workday/canvas-kit-css-badge

Add your node_modules directory to your SASS includePaths. You will then be able to import index.scss.

@import '~@workday/canvas-kit-css-badge/index.scss';

Accessibility

A common use case for the count badge is for displaying notifications, and there are several accessibility concerns you'll want to keep in mind:

• The button should have an aria-label that updates with the count
• The elements inside the button should have aria-hidden
• The live region should be outside the button
• The live region should be visually hidden and only contain text

Example

<button type="button" aria-label="Alerts 3 new notifications">
  <svg aria-hidden="true" focusable="false">...</svg>
  <span class="wdc-count-badge" aria-hidden="true">3</span>
</button>
<div class="wdc-accessible-hide" role="status" aria-live="polite" aria-atomic="true">
  New notifications
</div>

Note: To use the wdc-accessible-hide class, you'll need to import it from the core module.

@import '~@workday/canvas-kit-css-core/lib/accessibility.scss';

Usage

Variants

Default

<span class="wdc-count-badge">
  1
</span>

Inverse

<span class="wdc-count-badge-inverse">
  2
</span>

Formatting

Badges with more than 999 notifications should display '999+'

<span class="wdc-count-badge">
  999+
</span>