Modal Patterns
Full-screen and overlay modal patterns for expense review and detail views.
Expense Review Modal
Editable Expense Form
Review Expense Details
Please review and edit the extracted information
AI Confidence92%
EUR
AI Detected
Other Payment Methods
AI Suggestion
Common Alternatives
Review Modal Specifications
Container
max-w-3xl, p-6 md:p-8, rounded, borderTypography
font-light (all), font-extralight (heading)Input Style
Borderless with bottom border onlyField Confidence
emerald-500 percentage next to labelsPayment MethodSmart grid: AI detected + saved methods
Payment Display
Icon + label + masked numberCategory SelectionSmart grid: AI suggestion + 3 alternatives
AI Suggestion Style
emerald-50 bg, emerald-500 borderSmart Grid Confidenceemerald-500 percentage in suggestions
Expansion ActionsText buttons with icons
Line ItemsGrid layout with inline inputs
Button StylePrimary: inverted, Secondary: text-only
Expense Detail Modal
Click an expense to view details