Combined Chip + Popup Mockup

Handling multiple variants (Fresh + Frozen Broccoli) with expiry

The Scenario

User has 3 broccoli total:

Chip → Popup Flow

+ 3 Broccoli fri+fzr 1 exp! − ×

Click chip → opens popup with full breakdown

→

Broccoli

3 total | fridge + freezer
Variants in Stock
Fresh Broccoli
fridge
1 expires TOMORROW!
2
Frozen Broccoli
freezer
No expiry
1
Expiry Details
⚠️ 1 expiring soon
Fresh Broccoli #1: Jan 13 (tomorrow)
Fresh Broccoli #2: Jan 17 (5 days)

Expiry Indicator Options

When you have multiple items, how to show expiry on the chip?

Option A: Count + Urgency Recommended
+ 3 Broccoli 1 exp! − ×

Shows "1 exp!" when any item expiring within 3 days. Orange border = warning.

Option B: Soonest expiry date
+ 3 Broccoli exp: 1d − ×

Shows soonest expiry countdown. Good but doesn't show how many.

Option C: Border glow only
+ 3 Broccoli − ×

Orange border indicates something expiring. Cleanest but least info.

Option D: No indicator on chip
+ 3 Broccoli − ×

Expiry only shown in popup. Cleanest chip but user might miss expiring items.

Summary: Recommended Design

Chip shows:
Popup shows (when clicked):

All Expiry States

2 Milk EXPIRED
3 Broccoli 1 exp!
4 Yogurt 3 days
6 Pasta OK
1 Rice

Red = expired | Orange = expiring soon | Yellow = within week | Green = OK | None = no expiry set