registry:blockpro-application

Modals

A set of focused dialog patterns used to interrupt flow and prompt a clear user decision. Includes standard centered modals for general actions, destructive variants that emphasize risk and confirmation, and authentication modals optimized for sign-in and account access. Designed to keep attention contained, reduce background distraction, and clearly separate primary and secondary actions.

Modal 1 - Centered dialog modal

A centered modal with a fixed width and clear visual separation from the page using a dimmed backdrop. The layout is stacked and simple: a compact header with icon, title, description, and a close action, followed by a flexible content area. Actions sit at the bottom, aligned horizontally, with a clear primary and secondary button. Designed to focus attention, block background interaction, and work well for confirmations, forms, or short tasks.

Modal 2 - Destructive action modal

A centered dialog modal with a dimmed backdrop, similar in structure to Modal 1 but visually weighted toward caution. The header includes an icon, title, description, and a close action. The content area remains flexible and neutral, while the footer clearly emphasizes the primary action using a high-contrast, destructive button style, paired with a lower-priority secondary action. Designed to signal risk, confirm irreversible actions, and slow the user just enough to avoid mistakes.

Modal 3 - Authentication modal

A centered, medium-width modal designed specifically for sign-in flows. It uses a clear vertical layout with a strong heading, supporting text, and stacked form fields. Primary actions are visually anchored at the bottom with a full-width button, while secondary auth options are separated by a subtle divider to reduce cognitive load. Includes an inline close control, generous spacing, and soft elevation to keep focus on the task without feeling heavy. Optimized for quick entry, scanning, and repeated use.