Toast

Toasts are lightweight feedback surfaces. Spectra provides the toast content structure; pair it with cards and position helpers to pin messages where you need them.

Toast API

Class	Used for	Notes
`.sp-toast`	Single toast body	Grid wrapper with max width and internal gap tokens.
`.sp-toast-stack`	Stack of toasts	Use when multiple messages can appear together.
`.sp-toast__row`	Top row layout	Spaces the title area and close action.
`.sp-toast__title`	Heading	Semibold title with tighter tracking.
`.sp-toast__body`	Message copy	Body text block for the main feedback.
`.sp-toast__close`	Dismiss action	Usually paired with a small ghost button.

Preview

Inline stack

Saved

Your theme preference was stored locally.

Build queued

Spectra will finish packaging after the current task ends.

Position helper pairing

Published

Your docs bundle is ready to deploy.

Typical markup

<div class="sp-pos-bottom-right">
  <article class="sp-card sp-card--elev sp-toast">
    <div class="sp-card__body">
      <div class="sp-toast__row">...</div>
    </div>
  </article>
</div>

Guidance

Keep toast copy brief and actionable. If the message needs paragraphs, decisions, or deep form content, it probably wants a drawer or modal instead.