agents/projects/chrome-design-system/assets/component-specs/Badge_Spec.md
This specification document outlines the mapping, design tokens, styling variants, and interactive states of the Badge component across Figma, C++ Views, and WebUI (Web Frontend).
The Badge component is a highly compact, informational text label (commonly rendering text like "NEW"). It is placed alongside other components to highlight updates or new features.
| Feature | Figma Component | C++ Views (Desktop) | WebUI (Web Frontend) |
|---|---|---|---|
| Component Name | Badge | views::Badge | Custom CSS / new-badge |
| Source Files | Figma Link: 280:26503 | ui/views/controls/badge.h | ui/webui/resources/cr_components/help_bubble/new_badge.ts |
| Figma Variant | C++ views::Badge Method | WebUI Element/Class |
|---|---|---|
| Default (Tonal Container) | Not natively supported | .new-badge or custom |
| Cocoa Menu (Primary) | views::Badge standard behavior | <new-badge> / Custom |
This component is non-interactive.
| Interactive State | Figma | C++ views::Badge | WebUI |
|---|---|---|---|
| Default | N/A | Normal painting | Normal layout |
| Token Type | Figma Property | C++ Views | WebUI Variable / CSS |
|---|---|---|---|
| Typography | Special Label (9px, Bold) | Custom font list | font-weight: bold; font-size: 9px |
| Padding | 4px | Native layout | padding: 4px |
| Corner Radius | 4px | Native drawing | border-radius: 4px |
| Default Color | Tonal Container | N/A | CSS specific |
| Cocoa Color | Primary | Hardcoded blue | CSS specific |
views::Badge in C++ hardcodes its rendering to a blue background. Custom colors (like the Tonal Container variant seen in Figma) require overriding or creating a new View.<new-badge>: Some WebUI systems use specialized components like <new-badge> (from user education frameworks) instead of a universal CSS primitive.views::View → views::Badge