You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
A badge count is a non-interactive visual indicator that displays numeric values to communicate quantities or notification counts.
5
+
Badge Count is a compact numerical indicator that displays quantities like unread notifications, item counts, or pending actions on interface elements.
6
6
7
7
---
8
8
9
9
## Definition
10
10
11
-
🚧 Missing from source: Definition section in badge_count_overview.md
11
+
The Badge is a small UI element used to highlight status, notifications, or categorization within an interface. It is often displayed as a label or indicator with a distinct background color and text.
✅ Displaying unread notification counts on navigation icons or menu items
20
+
✅ Displaying unread message or notification counts on navigation icons
18
21
19
-
✅ Showing the number of items in a shopping cart or basket
22
+
✅ Showing item quantities in shopping carts or baskets
20
23
21
-
✅ Indicating active filter counts in search or data table interfaces
24
+
✅ Indicating pending tasks or action items requiring attention
22
25
23
-
✅ Communicating pending task or action quantities requiring user attention
26
+
✅ Communicating status counts on tabs or navigation items
24
27
25
-
✅ Displaying unread message counts in messaging or email applications
28
+
✅ Highlighting new content arrivals in feeds or inboxes
26
29
27
-
✅ Showing the number of updates or alerts in system status indicators
30
+
✅ Representing active filter counts in data tables
28
31
29
-
✅ Indicating quantities in tabbed interfaces where counts provide useful context
32
+
✅ Showing selected item quantities in multi-select interfaces
30
33
31
-
✅ Communicating real-time count changes for collaborative or dynamic content
34
+
✅ Displaying error or warning counts in system dashboards
32
35
33
-
✅ Displaying error or warning counts that need user acknowledgment
36
+
✅ Indicating unprocessed queue items in workflow interfaces
34
37
35
-
✅ Showing selection counts in multi-select or batch operation interfaces
38
+
✅ Communicating real-time count changes in collaborative tools
36
39
37
40
---
38
41
39
42
## Anatomy 👈🤖
40
43
41
44
| # | Element | Purpose | Optional |
42
45
|---|---------|---------|----------|
43
-
| 1 | Container | Pill-shaped background that holds the count value and provides visual emphasis through status color | N |
44
-
| 2 | Count label | Numeric text displaying the quantity value, centered within the container | N |
45
-
| 3 | Status color | Background color indicating semantic meaning: Neutral, Accent, Positive, Info, Warning, or Negative | N |
46
-
| 4 | Padding | Horizontal spacing ensuring consistent internal layout regardless of digit count | N |
47
-
| 5 | Border radius | Pill shape (2000px radius) creating the characteristic rounded appearance | N |
46
+
| 1 | Container | Pill-shaped background that holds the count value and provides visual emphasis through status-specific colors | N |
47
+
| 2 | Count text | Numeric value displayed within the container indicating quantity or amount | N |
48
+
| 3 | Status color | Background color that conveys semantic meaning (neutral, accent, positive, info, warning, negative) | N |
49
+
| 4 | Typography | Label font styling applied to the count text for readability at small sizes | N |
50
+
| 5 | Padding | Horizontal spacing within the container that ensures count text has adequate breathing room | N |
51
+
| 6 | Minimum width | Constraint ensuring the badge maintains a circular shape for single-digit counts | N |
48
52
49
53
---
50
54
51
-
🚧 Missing from source: badge_count_overview.md file required (no additional sections found to inject)
55
+
## Status
56
+
57
+
Badges have seven states depending on the context of the information they represent. Each state is designed to convey a specific meaning and ensure clarity in communication.
58
+
59
+
**`Neutral`** Used for general labels without specific emphasis.
60
+
61
+
**`Accent`** Employed to highlight discovery or exploration-related content.
62
+
63
+
**`Positive`** Indicates success, completion, or approval.
64
+
65
+
**`Info`** Provides informational context without urgency.
66
+
67
+
**`Warning`** Negatives the user to potential risks or cautionary messages.
68
+
69
+
**`Negative`** Draws attention to important or critical information.
70
+
Often used for errors, restrictions, or urgent messages, but not exclusively for failures.
52
71
53
72
---
54
73
55
-
#Specs
74
+
## status_do_&_dont 👈🤔
56
75
57
-
## States
76
+
✅ **Do:** Use semantic status colors consistently throughout the application to establish clear visual language for users
77
+
❌ **Don't:** Use red/negative status for non-critical information, as it creates unnecessary alarm and diminishes urgency perception
58
78
59
-
🚧 Missing from source: States section in badge_count_overview.md
79
+
✅ **Do:** Reserve the Accent status for highlighting promotional or discovery-related counts that encourage exploration
80
+
❌ **Don't:** Mix status meanings across contexts—a color should always represent the same semantic meaning
60
81
61
-
Based on Figma component data, the Badge Count supports the following states:
82
+
✅ **Do:** Use Neutral status as the default when the count doesn't require semantic emphasis or urgency
83
+
❌ **Don't:** Overuse Warning or Negative statuses, as they lose impact when applied to non-urgent information
62
84
63
-
**Enabled state**: The badge displays with full status color styling and readable count text. The contrast ratio between content and background meets the 4.5:1 minimum requirement.
85
+
✅ **Do:** Apply Positive status to communicate successful completions, approvals, or beneficial counts
86
+
❌ **Don't:** Use multiple different status colors in close proximity without clear contextual differentiation
64
87
65
-
**Disabled state**: The badge displays with a muted background color (`color-action-disabled`) and reduced contrast text (`color-content-on-action-disabled`), indicating the associated element or feature is unavailable.
88
+
✅ **Do:** Consider colorblind users by ensuring status meaning is conveyed through context, not color alone
89
+
❌ **Don't:** Rely solely on status color to communicate critical information—pair with labels or icons when essential
90
+
91
+
---
92
+
93
+
## Size
94
+
95
+
**`Medium`** The default size, providing a balance between visibility and space efficiency, suitable for most use cases.
96
+
97
+
**`Large`** A prominent badge for drawing more attention, often used in dashboards or highlighted sections.
98
+
99
+
---
100
+
101
+
## size_do_&_dont 👈🤔
102
+
103
+
✅ **Do:** Use Medium size (16px) as the default for most interface contexts where badges appear alongside icons or text
104
+
❌ **Don't:** Use Large size in compact layouts where it may crowd adjacent elements or disrupt visual hierarchy
105
+
106
+
✅ **Do:** Choose Large size (20px) for dashboards, cards, or areas where the count requires prominent visibility
107
+
❌ **Don't:** Mix badge sizes inconsistently within the same component or navigation pattern
108
+
109
+
✅ **Do:** Ensure badge size is proportional to the parent element it's associated with (icons, buttons, avatars)
110
+
❌ **Don't:** Use badges so small they become illegible or difficult to distinguish from decorative dots
111
+
112
+
✅ **Do:** Consider touch target requirements when badges are placed on interactive elements in mobile contexts
113
+
❌ **Don't:** Increase badge size solely to draw attention—use status colors or positioning instead
114
+
115
+
✅ **Do:** Maintain consistent size selection across similar use cases throughout the application
116
+
❌ **Don't:** Choose Large size for single-digit counts where Medium provides sufficient visibility
117
+
118
+
---
119
+
120
+
# Specs
121
+
122
+
## States
123
+
124
+
**`Enabled`** The active state of a badge. Includes all possible visual statuses that represent the current state of the system or element (e.g., success, warning, error, information, etc.). Used when the badge should attract attention and convey meaningful information.
125
+
126
+
**`Disabled`** The inactive state of a badge. Used to indicate that the user isn't allowed to interact with an element, or when the status is unavailable. It appears less prominent and serves as a secondary indication.
127
+
Badges with content keep the Enabled content but change their visual appearance.
66
128
67
129
---
68
130
@@ -76,81 +138,89 @@ Based on Figma component data, the Badge Count supports the following states:
76
138
77
139
## Accessibility intro
78
140
79
-
Badge Count components must meet WCAG 2.2 Level AA standards for color contrast, status communication, and assistive technology compatibility. For comprehensive accessibility guidance, see the [Orange Unified Design System Accessibility Overview](https://unified-design-system.orange.com/472794e18/p/88ebab-accessibility-and-sustainability).
141
+
Badge Count components must meet WCAG 2.2 Level AA requirements for color contrast, non-text content identification, and status message communication. For comprehensive accessibility guidance, see the [Orange Unified Design System Accessibility Overview](https://unified-design-system.orange.com/472794e18/p/88ebab-accessibility-and-sustainability).
80
142
81
143
---
82
144
83
145
## Accessibility Challenges
84
146
85
-
Badge counts present unique accessibility challenges because they are non-interactive visual indicators that communicate dynamic numeric information. Users must be able to perceive badge updates through multiple channels, and screen reader users need equivalent access to count changes without requiring focus navigation to the badge element.
147
+
Badge counts present unique accessibility challenges because they convey dynamic numerical information through small visual indicators that must be perceivable by all users regardless of ability. The compact size, reliance on color for status meaning, and non-interactive nature require careful implementation to ensure screen reader users receive equivalent information.
86
148
87
149
### Key Challenges
88
-
- Color-only status differentiation may exclude users with color vision deficiencies
89
-
- Dynamic count updates may not be announced to screen reader users
90
-
- Small text size within badges can impact readability for users with low vision
91
-
- Non-interactive nature means standard focus-based announcement patterns don't apply
150
+
151
+
- Small size makes meeting 4.5:1 contrast ratio critical for text legibility
152
+
- Status colors must not be the sole method of conveying semantic meaning
153
+
- Dynamic count updates need to be announced to assistive technology users
154
+
- Non-interactive nature means badges should not receive keyboard focus
92
155
93
156
### Critical Success Factors
157
+
94
158
1. Maintain 4.5:1 minimum contrast ratio between count text and background (WCAG 1.4.3)
95
-
2. Provide programmatic context through `aria-label` or adjacent text for screen readers
96
-
3. Use ARIA live regions to announce count changes when updates occur dynamically
97
-
4. Ensure status meaning is conveyed through more than color alone
159
+
2. Provide programmatic text alternatives via `aria-label` or visually hidden text
160
+
3. Use `aria-live` regions for dynamic count updates when contextually important
161
+
4. Ensure status meaning is conveyed through context, not color alone
98
162
99
163
---
100
164
101
165
## Design Requirements
102
166
103
167
### Structure & Labels
104
-
-[ ]**Accessible context**: Provide descriptive text via `aria-label` or visually hidden text (e.g., "5 unread messages" not just "5") ([Orange labeling guidelines](https://a11y-guidelines.orange.com/en/web/develop/textual-content/))
105
-
-[ ]**Non-interactive element**: Badge should not receive keyboard focus as it is purely informational (WCAG 2.4.3)
106
-
-[ ]**Semantic association**: Position badge adjacent to its related element so context is clear to all users
-[ ]**Hidden text alternative**: Include visually hidden text for screen readers when badge is purely visual
171
+
-[ ]**Contextual association**: Ensure badge is programmatically associated with its parent element via proximity or `aria-describedby`
107
172
108
173
### Visual Design
109
-
-[ ]**Text contrast**: Minimum 4.5:1 contrast ratio between count and background color ([Orange contrast guidelines](https://a11y-guidelines.orange.com/en/web/design/colors-and-contrasts/))
110
-
-[ ]**Color independence**: Don't rely solely on color to convey status; combine with text labels or icons when critical
111
-
-[ ]**Minimum size**: Ensure count text meets minimum 12px font size for readability
174
+
175
+
-[ ]**Color contrast**: Minimum 4.5:1 ratio between count text and background color ([Orange A11y - Colors](https://a11y-guidelines.orange.com/en/web/design/colors-and-contrasts/))
176
+
-[ ]**Non-color identification**: Status meaning conveyed through context/labels, not color alone
177
+
-[ ]**Minimum size**: Ensure count text meets minimum target size for legibility
| Oct 14, 2025 | 1.2.0 |• The component now has two states: Enabled and Disabled. • Documentation has been updated and published in Zeroeight, with use case examples provided for every state. • The colors and background tokens for the functional states of the positive and info statuses have been changed. • The minimum required contrast ratio has been corrected from 3:1 to 4.5:1 between content (count) and background for Enable state.For the "Status neutral" variant: • The content token "color-content-on-status-neutral-emphasized" has been replaced by the token "color-content-inverse" • The surface token "color-surface-status-neutral-emphasized" has been replaced by the token "color-surface-inverse-high" | Anton Astafev |
163
-
| Jun 16, 2025 | 1.1.0 |• "Accent" variant added | Maxime Tonnerre |
164
-
| Mai 9, 2025 | 1.0.0 |• Component creation | Anton Astafev |
232
+
| Oct 14, 2025 | 1.2.0 |<ul><li>The component now has two states: Enabled and Disabled. <li>Documentation has been updated and published in Zeroeight, with use case examples provided for every state. <li>The colors and background tokens for the functional states of the positive and info statuses have been changed. <li>The minimum required contrast ratio has been corrected from 3:1 to 4.5:1 between content (count) and background for Enable state.</ul>For the "Status neutral" variant: <ul><li>The content token "color-content-on-status-neutral-emphasized" has been replaced by the token "color-content-inverse" <li>The surface token "color-surface-status-neutral-emphasized" has been replaced by the token "color-surface-inverse-high"</ul>| Anton Astafev |
233
+
| Jun 16, 2025 | 1.1.0 |<ul><li>"Accent" variant added</ul>| Maxime Tonnerre |
234
+
| Mai 9, 2025 | 1.0.0 |<ul><li>Component creation</ul>| Anton Astafev |
0 commit comments