Skip to content

Badge enhancements #16276

@dkoleva-infra

Description

@dkoleva-infra

Enhance the igx-badge component to include new predefined sizes and a new Dot type, implement an improved outline that does not affect the badge’s inner content, update icon and font sizes, and resolve contrast issues to ensure compliance with WCAG AA accessibility standards, following the latest design handoff.

1. Add predefined sizes

  • small
  • medium
  • large

2. Add Dot type

  • Introduce a new Dot type as a minimal badge without any content
  • The Dot type can use any variant (default, info, success, warning, error)

3. Improve outline implementation

  • Replace the current border-based outline with a CSS outline or box-shadow implementation
  • Ensure the outline is rendered outside the badge without affecting its internal size or content

4. Accessibility and contrast improvements

  • Update foreground and background color pairs to meet WCAG AA contrast ratios

5. Visual and design alignment

  • Update icon and font sizes based on the latest Figma handoff
  • Verify spacing, padding, and border radius values align with design tokens

The modifications are valid for all 4 themes.

All details are to be found in the handoff file.

Metadata

Metadata

Assignees

Labels

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions