• Lightest
  • Light
  • Dark
  • Darkest
  • Medium
  • Large
  • LTR
  • RTL

Tray

Component status
Verified
Last releasedOctober 20, 2020
Current version@spectrum-css/tray@1.0.0-beta.2
View guidelines
Spectrum website
View repository
GitHub
View package
npm

Usage notes

Tray Dialogs are typically used to portray information on mobile device or smaller screens.

Variants

Tray
Contribution

Show markup
<div class="spectrum-Tray-wrapper spectrum-CSSExample-dialog">
  <div class="spectrum-Modal spectrum-Tray is-open spectrum-Tray " style="max-height: calc(1149px - var(--spectrum-tray-margin-top));">
    <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--medium spectrum-Divider--horizontal spectrum-Dialog-divider">
        <section class="spectrum-Dialog-content">You have 5 new messages.</section>
      </div>
    </section
  </div>
</div>