toast

CdrToast is a type of non-modal dialog used to communicate the status of a task or process. A proper toast is concise, time-relevant and temporary.

There are five information types supported for toasts: error, warning, success, informational and default. Each type corresponds with a color and icon to provide a consistent, universal experience for users.

Structure

• The width of a toast is fixed for non-mobile implementations
• The height of a toast is variable, content depending

Placement

• Toasts are delivered from the top-right of a page
• The most recent toast is always displayed on top of a stack

• An icon is both user-configurable and required
• Keep titles to three words at the most
• Body copy should not exceed two lines
• Create focused content specific to a single message
• Actions or links must be available elsewhere on the page

• Toasts auto-dismiss after 5 seconds—10 if it includes an action
• Toasts may be manually dismissed sooner via the close button
• Mousing over a toast will pause the auto-dismiss timer and reset it on mouse leave

What Cedar provides

All CdrToast components provide role="status" to expose the notification to accessibility APIs.

Development responsibilities

When using this component, here's what you are responsible for:

Don't rely on color alone to convey your message. Provide an additional indicator to color, like an icon.

Positioning

Contain CdrToast component(s) within a position: absolute container in the top-right corner of your page. On smaller screens, they should appear at the top of the page and span the whole width of the viewport.

Elevation

Give the CdrToast container an appropriate z-index value so the toast components within will "float" on top of the other page elements.

Multiples

If multiple CdrToast components are present, they should appear stacked with the newest at the bottom. When a toast is closed, any toast components below it will take the place of the one above.

Persistent toast

CdrToast provides an optional autoDismiss property to disable the auto-dismiss functionality.

<div>
  <cdr-chip
    :aria-pressed="opened"
    @click="opened = true"
  >
    Trigger toast
  </cdr-chip>
  <!-- CdrToast should always be contained within an absolutely 
  positioned element in the top right of your page -->
  <div style="position: absolute; top: 2rem; right: 1.5rem">
    <cdr-toast
      :open="opened"
      :auto-dismiss="false"
      type="warning"
      @closed="opened = false">
      <template #icon-left>
        <icon-warning-fill inherit-color/>
      </template>
      I am a warning toast and must be dismissed by user action
    </cdr-toast>
  </div>
</div>

Adjusting auto-dismiss timing

CdrToast provides an optional dismissDelay property to adjust timing of the automatic dismissal under certain conditions, such as when the toast contains an action.

<div>
  <cdr-button @click="opened = true">Trigger toast</cdr-button>
  <!-- CdrToast should always be contained within an absolutely 
  positioned element in the top right of your page -->
  <div style="position: absolute; top: 2rem; right: 1.5rem">
    <cdr-toast
      :open="opened"
      :dismiss-delay="10000"
      type="info"
      @closed="opened = false">
      <template #icon-left>
        <icon-information-fill inherit-color/>
      </template>
      I am an informational toast with an <cdr-link href="#">action</cdr-link>
    </cdr-toast>
  </div>
</div>