The Modal/Pop-up component is a versatile UI element used to capture attention and deliver content outside of the main page flow. It is commonly used for confirmations, filters, forms, or time/date selections. By appearing on top of the interface, modals ensure users focus on the immediate task or message without distractions.

Key Features

• Multiple modal types: general pop-ups, filter-specific pop-ups, and date/time pickers

• Configurable overlay with customizable opacity and color

• Support for different sizes (small, medium, full-screen)

• Smooth open and close transitions

• Option for dismissible (click outside/ESC) or persistent modals

• Keyboard accessibility and focus trapping

Design Considerations

• Maintain consistent styling across different modal types (spacing, typography, button placement)

• Ensure sufficient contrast and clear hierarchy between the modal content and background

• Provide clear close or cancel actions to avoid trapping the user

• Adapt layout for mobile and desktop (e.g., full-screen on mobile vs centered on desktop)

• Keep content concise to avoid overwhelming users

Usage Guidelines

• Use modals for short, focused tasks such as confirmations, filters, or scheduling actions

• Avoid stacking multiple modals; use step-by-step flows if needed

• For filters, keep controls simple and provide clear “Apply” and “Reset” actions

• For date/time pop-ups, ensure intuitive calendar and clock interactions with clear formatting

• Use sparingly to avoid interrupting the user’s workflow unnecessarily