Section 01
Bottom Sheet
28px top corners (sheetTop token). Handle bar 40×4px. Backdrop 50% opacity + blur. Half-height ≈ 50vh, Full = sticky header + scrollable + sticky footer.
Half-Height Sheet
Screen content
Add Money
Choose amount to invest
💰
Quick Invest ₹500
Round-up from today
📱
Custom Amount
Enter any amount
Half-height — options list
Full-Height Sheet (sticky footer)
Peeking content
A
Amazon
3% cashback · Shopping
Full-height + sticky CTA footer
Bottom Sheet Spec: borderRadius 28px 28px 0 0 · Handle: 40×4px, rFull, rgba(0,0,0,0.18), centered 12px from top · Backdrop: rgba(12,18,32,0.5) + blur(4px) · Dismiss on backdrop tap · Sticky footer: border-top 1px #F0F0F0, padding 16px 20px 24px.
Section 02
Action Sheet
iOS-style action list with optional title, destructive option, and separate cancel button. Opens from bottom.
Standard Action Sheet
Share or export transaction
📤 Share Transaction
📋 Copy Reference ID
📥 Download PDF Receipt
Cancel
3 actions + cancel
With Destructive Option
Brand — Zomato
✏️ Edit Preferences
🔔 Notification Settings
🗑 Remove Brand
Cancel
With destructive row
Section 03
Modal / Dialog
335px wide, 24px radius, shadowHigh. Centered vertically with backdrop. Confirm (2 buttons), Info (1 dismiss), and Form variants.
Confirmation Dialog
You're about to invest ₹1,000 in Zomato. This will be deducted from your Multipl wallet immediately.
Confirm + Cancel
Info Dialog
₹47.20 has been credited to your Multipl wallet from last week's shopping. Keep spending to earn more!
Info — dismiss only
Destructive Confirmation
Removing Zomato will stop all cashback tracking for future purchases. Your earned cashback won't be affected.
Destructive action
Section 04
Tooltips
Dark (bgDark) and Light (bgCard + border) variants. 4 arrow positions. Max-width 220px. Appear on long-press (mobile) or hover (web).
XIRR = annualised return rate including timing of cash flows
XIRR ℹ
Dark — above trigger
Cashback ℹ
Cashback is credited within 48 hours of a qualifying purchase
Light — below trigger
Rate ℹ
Annual rate: 8.4% compounding daily
Dark — right
Section 05
Dropdown Menu
Floating card, 16px radius, shadowHigh. Opens on tap of ⋮ or chevron. Auto-positions to stay within viewport. Max 5 items.
Standard Menu (3 items)
Open — 3 options
Menu with Destructive
With destructive option
Icon-only Trigger
Icon trigger ⋮