• Light
  • Dark
  • Darkest
  • Medium
  • Large
  • LTR
  • RTL
  • Default
  • Express


Component status
Current version@spectrum-css/tray@3.1.1
ReleasedMay 22, 2024

Usage notes

The Tray component is typically used to portray information on mobile devices or smaller screens.



The following example displays differently depending on the orientation of the viewport, using the orientation CSS media feature. In portrait orientation, a Tray is displayed at the bottom of the screen and takes up the full width of the view. In landscape orientation, it keeps its portrait width, is centered horizontally, and has rounded upper corners.

Show markup
<div class="spectrum-Tray-wrapper spectrum-CSSExample-dialog" style="background: rgba(0,0,0,0.4);">
  <div class="spectrum-Modal spectrum-Tray is-open">
    <section class="spectrum-Dialog spectrum-Dialog--large" role="dialog" tabindex="-1" aria-modal="true">
      <div class="spectrum-Dialog-grid">
        <h1 class="spectrum-Dialog-heading spectrum-Dialog-heading--noHeader">New Messages</h1>
        <hr class="spectrum-Divider spectrum-Divider--sizeM spectrum-Divider--horizontal spectrum-Dialog-divider">
        <section class="spectrum-Dialog-content">You have 5 new messages.</section>

Custom Properties API

This component can be modified via its --mod-* prefixed custom properties. A list of those prefixed custom properties can be found here.