Skip to content
Introducing StyloftCSS 0.1 / A small foundation for your next big idea. Meet the framework
Components/Toast notifications
Overlays

Toast notifications

Toast notifications patterns built with StyloftCSS and native HTML.

CSS only1 examplesKeyboard friendly HTML

Toast

A manually triggered native notification. Queueing, application events and timed dismissal require application code.

Live preview
Sample notification

Sample content. Escape or click outside to dismiss. No automatic timer or application event is wired to this example.

View HTML / PlaygroundHTML source
example.htmlHTML
<button type="button" class="sl-btn" popovertarget="ref-toast">
  Show notification
</button>
<div class="sl-popover sl-toast sl-stack" id="ref-toast" popover="auto" role="status">
  <div class="sl-cluster sl-justify-between">
    <strong>Sample notification</strong
    ><button
      type="button"
      class="sl-close"
      popovertarget="ref-toast"
      popovertargetaction="hide"
      aria-label="Dismiss Sample notification"
    >
      ×
    </button>
  </div>
  <p>
    Sample content. Escape or click outside to dismiss. No automatic timer or
    application event is wired to this example.
  </p>
</div>
HTML source · enable JavaScript for the playground21 lines · UTF-8

Classes beginning with sl- come from StyloftCSS. Examples with demo- classes also use our optional demo extension CSS ↓. Load it after the core to reproduce those details.