Anatomy

1. Scrim
2. Header
3. Dismiss
4. Action (optional)

Appearance

Trays consist of three main parts; a header, content, and optional footer. The container uses an elevation that helps it to appear on top of the main page.

Trays consist of three main parts:

• Header - Headers include an exit button and a title that describes clearly what the purpose of the tray is.
• Content - The content area is flexible and can include text, images, form fields, or other elements.
• Footer (optional) - Up to two CTAs can be included in the footer, typically to confirm/continue or cancel the action.

Open tray with no footer

Behavior

Modality

Trays appear in response to a user action such as clicking a Learn More link or a link to change input (ex. updating your zip code or changing sorting options).

Trays disable all other functionality when they appear, and remain on screen until confirmed, dismissed, or a required action has been taken.

Scrolling

A tray with overflowing inner content

Trays may contain more content than can be included in a single screen. A scroll bar can be used in these cases.

While scrolling, the Tray header remains fixed 64 px from the top.

Usage

Trays often require users to take action before they can continue interacting with the underlying page or the next page in the user's workflow. They can be disruptive and should be used thoughtfully and sparingly.

Before deploying a tray, we encourage you to review the modality documentation.

Use for short, non-frequent tasks, such as changing filters or sorting options

Do not use for short, informational messages