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

Tray

Component status
Contribution
Current version@spectrum-css/tray@3.1.3
ReleasedSeptember 13, 2024
S2-foundations@spectrum-css/tray@4.0.0-s2-foundations.13
ReleasedSeptember 12, 2024
View guidelines
Spectrum website
View repository
GitHub
View package
npm

Usage notes

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

Variants

Standard
Contribution

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>
      </div>
    </section>
  </div>
</div>

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.