Modals
Modal Heading
Text in a modal
Surface focused content or a short form without leaving the page.
Popover in a modal
This button should trigger a popover on click.
Tooltips in a modal
This link and that link should have tooltips on hover.
Overflowing text to show scroll behavior
Modals stack above the page using a dark backdrop, so the dialog stays the clear focus while everything behind it is dimmed, blurred, and locked away.
When body content exceeds the viewport, the modal scrolls naturally so users can reach every action without losing their place.
Header, body, and footer regions keep a consistent structure, letting you place titles, rich content, and action buttons exactly where your visitors expect to find them every time.
Buttons inside the footer trigger save or dismiss actions, while the close icon in the header offers a quick, predictable exit from the dialog at any point.
Tooltips and popovers can live inside a modal too, layering helpful hints over the dialog without crowding the main message.
Long-form copy demonstrates how the dialog handles overflow gracefully, keeping the heading pinned in place while the reader scrolls calmly through all of the text below it.
Each modal can be sized small, large, or fullscreen, adapting smoothly to the amount of content and the exact level of focus that a given task demands.
Keyboard and screen-reader support is built in, so the dialog traps focus and announces its purpose to assistive technology.
Closing the modal returns focus to the trigger button that opened it, restoring the underlying page content exactly the way the visitor left it just moments earlier.
Modal – Optional Sizes
Modal Heading
The large modal gives wide layouts more breathing room, ideal for tables, side-by-side fields, or detailed product information.
Extra width keeps complex forms readable, so labels and inputs line up cleanly across the dialog instead of wrapping awkwardly the way they might on smaller modals.
Use it when a standard modal feels cramped but a fullscreen takeover would clearly be more space than the task in front of the user actually requires.
Content still scrolls smoothly whenever it is needed, and the header and footer remain fixed in place for predictable, reliable navigation throughout.
Like every Canvas modal, the large variant is fully responsive and collapses to a comfortable, readable column width on tablet, laptop, and mobile screens alike.
Modal Heading
The small modal is perfect for brief confirmations or quick prompts, keeping the dialog compact, the message clear, and the decision genuinely simple to make fast.
Modal Heading
A scrollable modal is the right pattern whenever the body content is simply too long to fit the viewport in one comfortable view. Instead of stretching the dialog past the edges of the screen, the body region scrolls on its own while the header and footer stay anchored in place. That keeps the title and the primary action buttons within easy reach no matter how far the reader has travelled down the page of text in front of them.
Use this layout for terms and conditions, release notes, onboarding guides, or any reference material a visitor needs to read in full before deciding how to proceed. Because only the inner region moves, the surrounding chrome never jumps, and the close icon remains exactly where the eye expects to find it from the very first moment the dialog opens on screen.
The backdrop behind the modal stays fixed and gently dimmed throughout the interaction, reinforcing that the dialog is the single point of focus until it is dismissed. Focus is trapped inside the modal for keyboard users, so pressing tab cycles only through the controls that belong to the dialog itself, rather than wandering off into the page that sits hidden quietly behind it during reading.
When the reader reaches the footer they can save their choice or dismiss the dialog, and closing it returns focus to the button that first opened the modal. The page underneath is restored exactly as it was, making the scrollable modal a dependable way to present detailed information without ever pulling the visitor away from the page they came from.
Modal Heading
A fullscreen modal takes over the entire viewport, which makes it ideal for immersive tasks like multi-step wizards, media galleries, or detailed editors that benefit from every available pixel. The dialog expands edge to edge on smaller screens, giving complex forms and rich layouts the room they need to breathe without the visitor feeling boxed in.
Because the modal fills the browser window completely, it works especially well on small mobile devices where a centered dialog would otherwise feel cramped and fiddly to use. Visitors get a focused, app-like experience, and the close control stays pinned in the header so that leaving the view is always one clear, predictable tap or single click away at any point during the task at hand.
Inside the fullscreen surface you can arrange content in flexible columns, tabs, or panels just as you would on a full standalone page, while still keeping the modal behaviour that traps focus and dims the world behind it. That combination lets you build guided, multi-step flows that feel genuinely substantial without ever forcing a full navigation away from the visitor current location.
Choose the fullscreen variant whenever a task truly deserves the visitor undivided attention and a standard dialog would feel far too small for the job at hand. When the work is finished, dismissing the modal returns focus to the trigger and restores the underlying page exactly as it was, completing the entire round trip cleanly and without any noticeable disruption.
Modal Heading
A vertically centered modal sits in the middle of the screen, drawing the eye to short, important messages with very little scrolling required of the reader at all.