Toast

a transient, dismissible notification on the status axis.

Example

Saved

Your changes are live.

Heads up

Storage is almost full.

Failed

Could not reach the server.

<div class="lucent-toast lucent-toast--success" role="status" aria-live="polite">
  <div class="lucent-toast__header">
    <span class="lucent-toast__title">Saved</span>
    <span class="lucent-icon-button lucent-icon-button--text lucent-icon-button--sm lucent-toast__close">
      <button class="lucent-icon-button__inner" type="button" aria-label="Dismiss" data-lucent-dismiss=".lucent-toast">
        <span class="lucent-icon lucent-icon--md" aria-hidden="true">
          <span class="material-icons lucent-icon__glyph">close</span>
        </span>
      </button>
    </span>
  </div>
  <p class="lucent-toast__message">Your changes are live.</p>
</div>
<div class="lucent-toast lucent-toast--warning" role="status" aria-live="polite">
  <div class="lucent-toast__header">
    <span class="lucent-toast__title">Heads up</span>
    <span class="lucent-icon-button lucent-icon-button--text lucent-icon-button--sm lucent-toast__close">
      <button class="lucent-icon-button__inner" type="button" aria-label="Dismiss" data-lucent-dismiss=".lucent-toast">
        <span class="lucent-icon lucent-icon--md" aria-hidden="true">
          <span class="material-icons lucent-icon__glyph">close</span>
        </span>
      </button>
    </span>
  </div>
  <p class="lucent-toast__message">Storage is almost full.</p>
</div>
<div class="lucent-toast lucent-toast--error" role="status" aria-live="polite">
  <div class="lucent-toast__header">
    <span class="lucent-toast__title">Failed</span>
    <span class="lucent-icon-button lucent-icon-button--text lucent-icon-button--sm lucent-toast__close">
      <button class="lucent-icon-button__inner" type="button" aria-label="Dismiss" data-lucent-dismiss=".lucent-toast">
        <span class="lucent-icon lucent-icon--md" aria-hidden="true">
          <span class="material-icons lucent-icon__glyph">close</span>
        </span>
      </button>
    </span>
  </div>
  <p class="lucent-toast__message">Could not reach the server.</p>
</div>

Playground

Saved

Your changes are live.

variant
closable 
 
 
 
Using it
 
 
  
 Angular  lucent-toast 
import { LucentToast } from '@design-foundry/lucent-angular';
 		 
 
 Stylesheet  .lucent-toast 
@design-foundry/lucent-styles/core.css
 		 
  
 
  
API
 
 
 
NameKindTypeDefaultDescription
  
 title input string '' toast title. 
 message input string '' body text. 
 variant input informative | success | warning | error informative severity. 
 closable input boolean true shows the dismiss button. 
 closed output void  emits on dismiss. 
  
 
  
Theming
 
 
 
Color (11)
  
 
Size & spacing (5)
  
 
Border & radius (1)
  
 
Shadow (1)
  
 
Type (3)