MetaMask / MetaMask/metamask-design-system

[DSRN]: Add badge support to AvatarFavicon

Open
#503 0 comments 0 reactions 0 assignees View on GitHub
team-design-system
Dominant language
TypeScript
Stars
37
Forks
14
Avg merge
1d 9h
Merged PRs (30d)
60

Description

### **Description**

Upgrade the `AvatarFavicon` component to support display of `BadgeNetwork` and `BadgeIcon`, indicating the associated network and action type.

This continues the effort to enhance contextual clarity across avatar components as part of the UI badge audit.

### **Technical Details**

- Integrate `BadgeNetwork` and `BadgeIcon` components within `AvatarFavicon`
- Ensure badges are correctly positioned and styled per design guidelines
- Use props to optionally render network and action-type badges
- Action-type icons should reflect the activity or context associated with the favicon

### **Acceptance Criteria**

- `AvatarFavicon` renders network and icon badges based on props
- UI matches Figma designs
- Component remains backwards-compatible
- Responsive behavior verified across screen sizes
- Design QA passes (e.g., audit spacing, size, color, etc.)

### **References**

- Figma Audit Board: https://www.figma.com/board/pQa2vI7r08pHiqsAPTWdQ8/Avatar%2C-Token%2C-Network%2C-Icon%2C-Badge-Audit-and-Insight-Report?node-id=0-1&t=0EWeZ4yjDqhzZril-1
- Shared UI Components (WIP): https://www.figma.com/design/1D6tnzXqWgnUC3spaAOELN/%F0%9F%A6%8A%5BWIP%5D-DS-Components-(Shared-UI-lib)?node-id=120-1621&t=E6652Uk8pwcj6f2f-1

Contributor guide

Open the contributing guide

Research direction

Start at the AvatarFavicon component and inspect the existing BadgeNetwork and BadgeIcon components and their props. Use the linked Figma audit and shared UI designs to determine positioning, styling, and responsive behavior. Done means optional badges render correctly, existing usage remains compatible, and design QA passes across screen sizes.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
design, frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.