This full-width modal dialog fits just right when customers need to create, view, or edit a transaction.
When to use trowsers
Use a trowser (a transactional browser) when the customer needs to fill out a form, especially a complicated one.
The form that appears in the trowser can be a single-step or multi-step flow.
We can also use trowsers for multi-screen task flows, such as activation flows.
Trowsers include a header, a stage area, and a sticky footer. Sometimes we don’t have a footer on the trowser (for example, in a step flow).
The trowser and footer have a maximum width of 1440 px.
When the trowser appears on a large screen, the trowser appears centered with a black 40% opacity mask behind it.
The trowser’s sticky title or header remains secondary to the global header, even though it might lead to some of the same places (such as help and settings).
The X in the corner enables customers to close the trowser and return to where they started.
The sticky header
The history, gear, and help icons are optional. The X for closing the trowser is fixed.
Header with the help icon selected
When customers select icons in the header, they appear to be highlighted.
The header and stage
Beneath the header, the stage area displays the title information or the flow navigation.
In transactions, the stage displays important information such as the customer name, payment detail, and totals.
When customers select the history icon, they can see transactions they opened previously in a current session. In these cases, autosave is a requirement, because the customer can navigate between multiple transactions. The content should state that the customer’s work is being saved.
The next example shows what a trowser looks like when the customer selects the history icon.
The sticky footer
The sticky footer is permanently anchored to the bottom of the screen. The primary call to action is always on the right.
When completing a transaction or flow, the primary action is Save. During a flow navigation, Next becomes primary and Back is the secondary action placed to its left. When the customer completes the steps, the primary call to action changes to Save or Done.
There’s no need for a cancel button because the X always closes the current trowser, returning the customer to the layer they opened it from. If the customer entered data without saving and if autosave functionality doesn’t exist for the flow, a critical alert warns the customer that they might lose data.
The secondary button and action links are optional.
The sticky footer with flyout
When there are more than 3 actions, you can use a “more” flyout to give customers access to more actions.
When the customer makes a selection that opens a trowser (such as a button or link), the trowser slides down from the top of the screen. In the web view, the trowser covers up the left navigation.
When the trowser hits the bottom there is a small bounce to show the customer that it’s on top of something.
The trowser behaves similarly across devices. On devices other than desktop, we show fewer options in the header and footer. And if the mobile header is long, it will be truncated.
The fixed header and footer are required. But in the mobile view, we don’t display help, gear, or history icons.
One single primary button in the bottom right can launch a mobile-friendly menu. For all other actions, use the overflow icon–display the mobile-friendly menu button.
The main content area of the trowser scrolls behind the sticky header and footer. The form specifications differ between transaction forms and other forms, so be sure your form displays correctly.
How trowsers and drawers work together
A drawer can slide from right to left over the main content of a trowser to help customers add items (for example, adding a note to a transaction).
The trowser may use a stacked model to navigate deeper into a context, with each new trowser layering on top of the current one using animation. For example, while in the “Receive payment” trowser, a customer might click to view a related invoice. The trowser opens on top. Trowsers can also navigate between sibling trowsers (such as navigating between invoices).
If a 565 px drawer is ever opened within the trowser, it needs to be positioned appropriately. When there is space for the drawer and trowser to sit completely or partially side by side, the drawer panel will push the trowser left to recenter the total width of the drawer and trowser. If there is not enough space, the drawer will overlap the trowser as it does in smaller windows. When the save and X are not overlapped by the drawer, they use a dissolve transition to hide temporarily.
The main content area of the trowser scrolls behind the sticky header and footer. The form specs differ between transaction forms and other forms, so make sure you take a look at those.
A drawer can slide over the main content as a way to add items (examples: add a note to a transaction).
Navigation and the sticky footer
- The trowser title is in sentence case (Sentence case).
- The title stays the same throughout the entire flow. Examples: Get ready for payroll, Payroll tax setup, etc.
- Make sure the content aligns with the Intuit content design style guide.
Trowsers in the Intuit Design System
- The design for trowsers isn’t yet a part of the Intuit Design System site.
- Updated code for trowsers isn’t available yet. We’ll update this information as soon as more work is done.