Skip to main content

Full-screen modal

Display critical information or introduce a decision; covers 90% of the screen and disables all app functions until users dismiss it or take the necessary action.

Size​

Height​

The height is adjustable, with a maximum limit of 90% of the window height.

Width​

The width is determined by the screen resolution and equals about 90% of the screen content area (22 of the 24 grid columns). This dimension is fixed and remains consistent across different use cases.

Behavior​

In cases where the content exceeds the maximum height of the modal, the header and action bar are designed to stick to the top and bottom, making the content area scrollable.

If the modal has neither a header nor an action bar, the close button adheres to the upper-right corner and remains visible above any scrollable content.

Usage​

Full-screen modals are excellent tools for showcasing images, videos, and other media in an expansive format, facilitating user focus on the content.

For more straightforward content that doesn't require a separate page, like previews or catalog-style displays, full-screen modals can significantly improve the viewing experience.

Full-screen modals can also minimize disruptions during user interactions. For instance, when a user is prompted to sign in or register, a full-screen modal can make the process less intrusive and allow users to resume their previous activities quickly.

Best practices​

  • For complex tasks involving multiple steps or extensive information input, a Side modal or separate page may be more suitable than a full-screen modal.
  • Avoid using full-screen modals for actions that demand user attention or deliver crucial information. In such cases, a standard Modal would be more appropriate.