Badge Specification - IgniteUI/igniteui-webcomponents GitHub Wiki

Badge Specification

Contents

  1. Overview
  2. User Stories
  3. Functionality
  4. Test Scenarios
  5. Accessibility
  6. Assumptions and Limitations
  7. References

Owned by

Team Name: Design and Web Development (DnD)

Developer Name: Simeon Simeonov (@simeonoff)

Designer Name: Stefan Ivanov / Svilen Dimchevski

Requires approval from

  • Dyan Dimitrov | Date:

Signed off by

  • Radoslav Mirchev | Date:
  • Radoslav Karaivanov | Date: 13 July 2021

Revision History

Version Users Date Notes
1 Stefan Ivanov 5 Jul 2021 Update spec format
2 Simeon Simeonoff 12 Jul 2021 Update spec
3 Svilen Dimchevski 10 Oct 2025 Badge enhancements update

1. Overview

The badge is a small-shaped component indicating a status on a related item (such as avatar, navigation menu, list item, or anywhere else in an app where some active indication is required).

Objectives

The badge component should be associated with other parent components in order to indicate status change. It should be customizable, allowing changes to its variant and displayed value.

The badge supports multiple sizes (Small, Medium, Large).

Here's the design handoff in Figma

Design Handoff

Acceptance criteria

  1. Have a badge that shows a value
  2. Have a badge that shows an icon
  3. Have a badge that renders as a dot when no value, text, or icon is provided.
  4. The badge should adapt its size to fit the content
  5. The badge should have a variant indicating its importance: primary, info, success, warning, or danger
  6. The badge should support an Outline option which is drawn outside of the badge so that it does not affect its content
  7. The badge should provide a quick way to set its shape
  8. The badge should be positionable in relation to another element (e.g. in the top-right corner of an avatar)
  9. The badge should be available in multiple sizes: Small, Medium, Large

2. User Stories

Developer stories:

  • Story 1: As a developer, I want to use the badge with other components like avatars, navigation menus, list items etc.
  • Story 2: As a developer, I want to manipulate the position of the badge.
  • Story 3: As a developer, I want to use different visual variants like primary, info, success, warning, or error.
  • Story 4: As a developer, I want to set different values like text, number, or icon, or use a Dot badge with no content. Dot badges can be any type (primary, info, success, warning, error).
<igc-avatar initials="ZK">
    <igc-badge variant="error" outlined>6</igc-badge>
</igc-avatar>
<igc-avatar src="https://unsplash.it/60/60?image=55">
    <igc-badge shape="square"></igc-badge>
</igc-avatar>
<igc-avatar src="https://unsplash.it/60/60?image=56">
    <igc-badge variant="success"></igc-badge>
</igc-avatar>
  • Story 5: As a developer, I want to set the badge fill and outline color, with the outline drawn outside of the badge content.
  • Story 6: As a developer, I want to choose from Small, Medium, and Large badge sizes.

End-user stories:

  • Story 1: As an end-user, I want to be able to notice and determine the status of an element based on the badge attached to it and its color and value.

3. Functionality

3.1 End-User Experience The badge component should always display a small-shaped element with text, number, or icon content, or as a minimal Dot badge with no content. Colors are determined by the badge variant (primary, info, success, warning, error). The end-user interface consists of:

  • Different colors based on badge variant.
  • Different edge-rounding based ot badge shape.
  • Different values as content.
  • Different sizes: Small, Medium, Large
  • Dot type for minimal notification indication

3.2 Developer Experience

variant: Variant of the badge. Possible options primary, info, success, warning, danger. Will change the background color of the badge.

outlined: Adds an outline border around the badge.

shape: Determines if the badge is square or rounded.

size: Sets the badge size. Possible values: small, medium, large.

Properties

You should be able to configure the igc-badge by setting properties on it.

Name Description Type Default value Reflected
shape Set the shape of the badge square, rounded rounded true
variant Set the variant of the badge primary, info, success, warning, danger primary true
outlined Specify if the badge should be outlined or not Boolean false true
size Sets the size of the badge string small, medium, large

Slots

Name Description
(default) The default wrapper slot.

CSS Parts

Name Description
base The base wrapper of the badge.

4. Test Scenarios

Automation

  • Scenario 1: Should set the badge variant correctly.
  • Scenario 2: Should set the badge shape correctly.
  • Scenario 2: Should set the badge outline correctly.
  • Scenario 4: Should display content placed between the opening and closing tags of the badge.

5. Accessibility

ARIA Support

⚠️ **GitHub.com Fallback** ⚠️