Popup button
A Popup button opens another page of your project as a pop-up window over the current page. Use it to tuck secondary controls (more scenes, colour, blinds) behind one button without leaving the page.
Set it up
Build the content first: add a page (for example Lounge extras) and place the widgets that should appear in the pop-up.
Go back to the main page and add a Popup button (Buttons group). Its default size is 1 x 1 with an open-in-new icon.
Set Widget name and icon.
Under Popup settings:
| Setting | Default | Notes |
|---|---|---|
| Target page | First page | The page shown inside the pop-up |
| Width % | 60 | Pop-up width as a percentage of the screen |
| Height % | 60 | Pop-up height as a percentage of the screen |
| Hide popup header bar and close button | Off | Removes the title bar (the page name) and the close x |
Click Preview and press the button to test it.
Designing the pop-up page
The pop-up shows the whole target page scaled into the pop-up window, so design that page with the pop-up size in mind: fewer, larger widgets work best.
The header shows the target page's name. Name the page for the user (for example Lounge scenes).
If you hide the header and close button, make sure the user can still close the pop-up, for example with a Navigation button on the pop-up page.
A page used only as a pop-up does not need to appear in the menu.
In Preview, text inside a pop-up can render larger than it does on the page itself, as in the example above. Check that labels fit, and shorten them or enlarge the pop-up if they are cut off.
Popups from a floor plan
Plan view regions can open the same kind of pop-up, with the same target page, width and height settings (see Plan view: interactive floor plans).
Popup or Navigation?
| Use | When |
|---|---|
| Popup button | The user should stay in context and return with one tap |
| Navigation button or menu | The destination is a full area of the interface in its own right |
